flutter - 在颤动中将 Html.File 转换为 Uint8List

Question

我正在使用Drop zone颤振包。当文件被拖放到小部件中时，它会返回Html.File 。我想将其转换为 Io.File 或 Uint8List 格式以便上传。

标签： flutterdartflutter-web

Answer 1

可以使用dart:html包中的FileReader 读取Html 文件：

  void loadImage(html.File file) async {
    final reader = html.FileReader();
    reader.readAsArrayBuffer(file);
    await reader.onLoad.first;
    setState(() {
      imageData = reader.result as Uint8List;
    });
  }

这是完整的演示小部件：

import 'dart:typed_data';
import 'dart:html' as html;

import 'package:flutter/material.dart';
import 'package:drop_zone/drop_zone.dart';

class DropzoneDemo extends StatefulWidget {
  @override
  _DropzoneDemoState createState() => _DropzoneDemoState();
}

class _DropzoneDemoState extends State<DropzoneDemo> {
  Uint8List? imageData;

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Dropzone demo'),
          ),
          body: Center(
            child: Container(
              child: Stack(
                children: [
                  DropZone(
                    onDrop: (List<html.File>? files) => loadImage(files![0]),
                    child: Container(),
                  ),
                  if (imageData != null)
                    Center(child: Image.memory(imageData!))
                  else
                    Center(child: Text('Drop image here')),
                ],
              ),
            ),
          ),
        ),
      );

  void loadImage(html.File file) async {
    final reader = html.FileReader();
    reader.readAsArrayBuffer(file);
    final res = await reader.onLoad.first;
    print('${res.total} bytes loaded');
    setState(() {
      imageData = reader.result as Uint8List;
    });
  }
}