Flutter Web：使用 Dio 上传视频时显示进度答案

【问题标题】：Flutter Web: Show Progress while Uploading Video using DioFlutter Web：使用 Dio 上传视频时显示进度
【发布时间】：2021-11-28 12:17:01
【问题描述】：

我尝试从 Flutter Web 在 AWS s3 上上传视频，并且视频上传成功。但它并没有像上传多少百分比那样向我显示进度。

uploadFile(String url, Uint8List imageBytes) async {
    BaseOptions options = new BaseOptions(
        contentType: "multipart/form-data",
        headers: {
          'Access-Control-Allow-Origin': '*',
          "Access-Control-Allow-Methods": "POST,GET,DELETE,PUT,OPTIONS",
          "Access-Control-Allow-Credentials": true,
          "Access-Control-Allow-Headers": "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale",
          'Accept': "*/*",
        },
        connectTimeout: 200000,
        receiveTimeout: 200000,
        sendTimeout: 200000,
        followRedirects: true,
        validateStatus: (status) {
          print('Status: $status');
          return status <= 500;
        });

    Dio _dio = new Dio(options);

    var file = MultipartFile.fromBytes(imageBytes).finalize();

    await _dio.put(
      url,
      data: file,
      onReceiveProgress: (int sentBytes, int totalBytes) {
        double progressPercent = sentBytes / totalBytes * 100;
        print("Progress: $progressPercent %");
        if (progressPercent == 100) {
          dispose();
        }
      },
      onSendProgress: (int sentBytes, int totalBytes) {
        double progressPercent = sentBytes / totalBytes * 100;
        print("Progress: $progressPercent %");
        if (progressPercent == 100) {
          dispose();
        }
      },
    ).then((value) {
      print("response: ${value.data}");
      print("%%%%%%");
    }).catchError((onError) {
      print(onError);
      dispose();
    });
  }

我在函数onSendProgress 和onReceiveProgress 中打印了日志，但它没有显示任何日志。

任何人都可以帮忙显示在 AWS 服务器上上传视频的进度吗？如果有人需要更多信息，请告诉我。

【问题讨论】：

标签： flutter file-upload flutter-web dio flutter-file

【解决方案1】：

import 'package:dio/dio.dart' as dartio;

未来的uploadFile(Message message) async { // 忽略这个。最终 AuthenticationController authController = 获取.find();

String urlFileStore =
    (authController.state as Authenticated).currentAccount.urlFileStore;
String apiTokenFileStore = (authController.state as Authenticated)
    .currentAccount
    .apiTokenFileStore;

dartio.BaseOptions options = new dartio.BaseOptions(
    contentType: "multipart/form-data",
    headers: {'Authorization': apiTokenFileStore},
    connectTimeout: 200000,
    receiveTimeout: 200000,
    sendTimeout: 200000,
    followRedirects: true,
    validateStatus: (status) {
      _logger.wtf('uploadFile Status: $status');
      return status <= 500;
    });

dartio.Dio _dio = dartio.Dio(options);

try {
  var formData = dartio.FormData.fromMap({
    'file': await dartio.MultipartFile.fromFile(message.filePath),
  });

  var response = await _dio.post(
    urlFileStore,
    data: formData,
    onSendProgress: (int sent, int total) {
      _logger.wtf('$sent $total');
    },
  );
  //update message object filePath
  _logger.v(response);
} on Exception catch (e) {
  _logger.e(e);
}

}

这项工作是我的，我是客人，您需要更改帖子。

【讨论】：