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

Question

我尝试从 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 服务器上上传视频的进度吗？如果有人需要更多信息，请告诉我。

Answer 1

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

Future uploadFile(Message message) async {
    // just ignore this.
    final AuthenticationController authController =
      Get.find<AuthenticationController>();

    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);
    }
  }

这对我有用，我想你需要更改帖子的位置。