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

Posted 2023-02-23

【中文标题】Flutter Web：使用 Dio 上传视频时显示进度

【英文标题】：Flutter Web: Show Progress while Uploading Video using 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 服务器上上传视频的进度吗？如果有人需要更多信息，请告诉我。

【参考方案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);

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