【问题标题】：Why returning value from picked file is null ? Flutter为什么从选取的文件返回值是 null ？扑
【发布时间】：2020-10-31 13:36:06
【问题描述】：

在我的应用程序中，我使用了 image_picker 和 image_picker_web，但是在 iOS 上运行时它会抛出 No podspec found for 'image_picker_web' in '.symlinks/plugins/image_picker_web/ios'exception。所以我决定不使用它并选择像How to Pick files and Images for upload with flutter web 中接受的解决方案中的文件。选择文件的打印是正确的，但我的方法返回 null 我猜它在分配值之前返回变量。我不知道html所以我有点迷路了.. 返回选择的值我做错了什么？

FileReader reader = FileReader();
InputElement uploadInput = FileUploadInputElement();


Future<Uint8List> pickImage() async {
    print('FirebaseImageStorageRepositoryWeb. pickImage() started');
    // image_picker_web works on web but creates pod problems on iOS

//    Uint8List imageData;
//    String fileName;
//    await picker.getImage(source: ImageSource.gallery).then((picked) {
//      picked.readAsBytes().then((data) {
//        imageData = data;
//      });
//    });

    // image_picker // notworking on web...

    

    //html
    Uint8List imageData;
    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];

        print(
            'selected file: type:${file.type},name: ${file.name}, size: ${file.size}');

        reader.onLoadEnd.listen((e) {
          imageData = reader.result;
//          return imageData; // not working
        });

        reader.onError.listen((fileEvent) {
          print('Some Error occured while reading the file');
        });

        reader.readAsArrayBuffer(file);
      }
    });
    return imageData;
  }

【问题讨论】：

标签： html flutter

【解决方案1】：

按照Image picker flutter web 1.9 的答案（不是公认的..）我可以看到上面的代码有什么问题..

工作：

@override
  Future<Uint8List> pickImage() async {
    print('FirebaseImageStorageRepositoryWeb.pickImage() started');
    final completer = Completer<Uint8List>();
    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<Uint8List>> resultsFutures = files.map((file) {
        final reader = FileReader();
        reader.readAsArrayBuffer(files.first); // .readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result);
      });

      final results = await Future.wait(resultsFutures);
      completer.complete(results.first);
    });
    // need to append on mobile safari
    document.body.append(input);
    // input.click(); can be here
    final Uint8List image = await completer.future;
    input.remove();
    return image;
  }

【讨论】：