Flutter 网页上传文件答案

【问题标题】：Flutter web upload fileFlutter 网页上传文件
【发布时间】：2020-05-12 22:09:11
【问题描述】：

我想用Flutter web上传文件，但是遇到了一些问题，我的步骤如下：

/// choose file
  void _chooseFile() {
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.accept = ".mp4";
    uploadInput.multiple = true;
    uploadInput.click();
    uploadInput.onChange.listen((event) {
      final files = uploadInput.files;
      if (files.length == 1) {
        final file = files[0];
        final reader = FileReader();
        reader.onLoadEnd.listen((event) {
          print('loaded: ${file.name}');
          print('type: ${reader.result.runtimeType}');
          print('file size = ${file.size}');
          _uploadFile(file);
        });
        reader.onError.listen((event) {
          print(event);
        });
        reader.readAsArrayBuffer(file);
      }
    });
  }

/// upload file
/// file: in dart:html package not in dart:io package
  void _uploadFile(File file) async {
    FormData data = FormData.fromMap({
      'file': MultipartFile.fromBytes(
        List<int>, // -----------------------------> problem line
        filename: file.name,
      )
    });
    Dio dio = new Dio();
    dio.post('upload file url', data: data, onSendProgress: (count, total) {
      print('$count ==> $total');
    }).then((value) {
      print('$value');
    }).catchError((error) => print('$error'));
  }

问题是MultipartFile.fromBytes(List<int> value, {...})，但我不知道如何将file （在 dart:html 中而不是在 dart:io 中） 转换为 List<int>。

谢谢！！！

【问题讨论】：

print('type: ${reader.result.runtimeType}'); 打印什么？
你是怎么解决这个问题的？

标签： flutter flutter-web

【解决方案1】：

你需要转换reader，如下：

List<int> _selectedFile;
Uint8List _bytesData;

void _handleResult(Object result) {
    setState(() {
      _bytesData = Base64Decoder().convert(result.toString().split(",").last);
      _selectedFile = _bytesData;
    });
  }

调用函数：

_handleResult(reader.result);

然后，将_bytesData 传递给您的MultipartFile.fromBytes(...) 或返回函数类型为List<int> 并在您需要的任何地方调用它。

例如，这是我为获取图像所做的：

List<int> imageFileBytes;

    /// Browse Image:
  _setImage(int index) async {
    html.InputElement uploadInput = html.FileUploadInputElement();
    uploadInput.multiple = false;
    uploadInput.draggable = true;
    uploadInput.accept = 'image/*';
    uploadInput.click();
    html.document.body.append(uploadInput);
    uploadInput.onChange.listen((e) {
      final files = uploadInput.files;
      final file = files[0];
      final reader = new html.FileReader();
      reader.onLoadEnd.listen((e) {
        var _bytesData = Base64Decoder().convert(reader.result.toString().split(",").last);
        setState(() {
          imageFileBytes = _bytesData;
        });
      });
      reader.readAsDataUrl(file);
    });

    uploadInput.remove();
  }

【讨论】：

我正在尝试实施此解决方案，但尝试将任何文件类型解码为 Base64String 时出现此错误：已加载：source.gif 类型：Uint8List 文件大小 = 616456 错误：FormatException：无效字符（在字符1) 59] ^
我添加了一个适合我的示例。获取您需要拥有 List 的部分。 @JasonPerfetto
很抱歉没有跟进，但我能够成功使用此模式，但我必须对其进行调整以初始化我的阅读器 onLoadEnd 侦听器以在 initState 中发生

【解决方案2】：

InputElement uploadInput = FileUploadInputElement();
uploadInput.accept = 'image/*';
uploadInput.click();
uploadInput.onChange.listen(
  (changeEvent) {
    final file = uploadInput.files.first;
    final reader = FileReader();
    reader.readAsDataUrl(file);
    reader.onLoadEnd.listen(
      (loadEndEvent) async {
        _file = file;
        setState(() {});
      },
    );
  },
);

该代码对我来说很好。

【讨论】：