时间戳

首页 > 解决方案 > Flutter 网页上传文件

flutter - Flutter 网页上传文件

问题描述

我想用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>.

谢谢！！！

标签： flutterflutter-web

解决方案

您需要转换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();
  }

推荐阅读