Flutter 网页上传文件

Question

我想使用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> 。

谢谢！！！

Answer 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(...)或返回 func 类型为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();
  }

Answer 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(() {});
      },
    );
  },
);

该代码对我来说工作正常。