使用图像选择器以外的 pub 在 Flutter Web 上上传图像答案

【问题标题】：uploading images on flutter web using a pub other than the image picker使用图像选择器以外的 pub 在 Flutter Web 上上传图像
【发布时间】：2019-12-07 09:29:31
【问题描述】：

我想在flutter web上传图片，但是我知道的像image_picker这样的pub只支持Android和iOS，而Flutter Web不支持。我知道的另一个 pub 是 pub image，但我不知道如何在 flutter web 上使用 pub image .. 恳请分享您关于使用 pub image 或其他 pub 上传支持 Flutter web 的图像的知识..

【问题讨论】：

标签： flutter-web

【解决方案1】：

我正在寻找相同的解决方案。其实 onChange 在移动端 safari 上效果不好，需要修改 addEventListener 也需要追加。

  Future<void> _setImage() async {
    final completer = Completer<List<String>>();
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.multiple = true;
    uploadInput.accept = 'image/*';
    uploadInput.click();
    //* onChange doesn't work on mobile safari
    uploadInput.addEventListener('change', (e) async {
      // read file content as dataURL
      final files = uploadInput.files;
      Iterable<Future<String>> resultsFutures = files.map((file) {
        final reader = FileReader();
        reader.readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result as String);
      });

      final results = await Future.wait(resultsFutures);
      completer.complete(results);
    });
    //* need to append on mobile safari
    document.body.append(uploadInput);
    final List<String> images = await completer.future;
    setState(() {
      _uploadedImages = images;
    });
    uploadInput.remove();
  }

这也有效：

Future<void> _setImage() async {   
    final completer = Completer<List<String>>();
    final InputElement input = document.createElement('input');
    input
      ..type = 'file'
      ..multiple = true
      ..accept = 'image/*';
    input.click();
    // onChange doesn't work on mobile safari
    input.addEventListener('change', (e) async {
      final List<File> files = input.files;
      Iterable<Future<String>> resultsFutures = files.map((file) {
        final reader = FileReader();
        reader.readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result as String);
      });
      final results = await Future.wait(resultsFutures);
      completer.complete(results);
    });
    // need to append on mobile safari
    document.body.append(input);
    // input.click(); can be here
    final List<String> images = await completer.future;
    setState(() {
      _uploadedImages = images;
    });
    input.remove();
}

【讨论】：

您可以使用 Image.memory。前任。显示 _uploadedImages 的第一张图片Image.memory(base64Decode(_uploadedImages[0].toString().split(',')[1])

【解决方案2】：

您可以使用 dart:html 的 FileUploadInputElement 类。

import 'dart:html';

实现以下代码来启动文件选择器：

_startFilePicker() async {
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();

uploadInput.onChange.listen((e) {
  // read file content as dataURL
  final files = uploadInput.files;
  if (files.length == 1) {
    final file = files[0];
    final reader = new FileReader();

    reader.onLoadEnd.listen((e) {
      _handleResult(reader.result);
    });
    reader.readAsDataUrl(file);
  }
});
}

参考资料

Answer taken

【讨论】：