Question

我想在Flutter Web上上传图像，但是我知道的像image_picker这样的酒吧仅支持Android和iOS，而Flutter Web不支持它。我知道的另一家酒吧是酒吧图片，但我不知道如何在Flutter网站上使用酒吧图片。我谨与您分享使用酒吧图片或其他酒吧上传支持Flutter Web的图片的知识。

Answer 1

您可以使用dart：html的UserProfile类。

FileUploadInputElement

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

import 'dart:html';

参考

Answer taken

Answer 2

我正在寻找相同的解决方案。实际上，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();

    //* this also works
    // 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();
  }

使用除图片选择器之外的其他酒吧在Flutter Web上上传图片

2 个答案: