美文网首页
监听上传任务进度百分比

监听上传任务进度百分比

作者: xieyinghao | 来源:发表于2023-08-09 18:28 被阅读0次
    要监听多个上传任务的百分比并显示每个任务的进度,你可以使用 http.StreamedResponse 的 byteStream 和 total 属性,以及 StreamBuilder 来实现。以下是一个示例代码:
    
    首先,导入相关库:
    
    dart
    import 'dart:async';
    import 'dart:io';
    import 'package:file_picker/file_picker.dart';
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    然后,我们可以创建一个 FileUploadTask 类来表示每个上传任务:
    
    dart
    class FileUploadTask {
      final PlatformFile file;
      int totalBytes = 0;
      int bytesUploaded = 0;
    
      FileUploadTask(this.file);
    }
    接下来,我们可以稍微修改之前的代码来支持多个文件的上传和进度监听:
    
    dart
    List<PlatformFile> selectedFiles = [];
    List<FileUploadTask> uploadTasks = [];
    
    void selectFiles() async {
      List<FilePickerResult>? results = await FilePicker.platform.pickFiles(allowMultiple: true);
    
      if (results != null) {
        for (var result in results) {
          selectedFiles.add(result.files.first);
        }
      }
    
      // 初始化上传任务列表
      uploadTasks = selectedFiles.map((file) => FileUploadTask(file)).toList();
    }
    
    Future<void> uploadFiles() async {
      for (var task in uploadTasks) {
        var request = http.MultipartRequest('POST', Uri.parse('your_upload_url'));
        request.files.add(await http.MultipartFile.fromPath('file', task.file.path));
    
        var response = await request.send();
        task.totalBytes = response.contentLength ?? 0;
    
        response.stream.listen((value) {
          // 监听上传进度
          task.bytesUploaded += value.length;
        });
    
        if (response.statusCode == 200) {
          // 上传成功
        } else {
          // 上传失败
        }
      }
    }
    在上述代码中,我们创建了一个 uploadTasks 列表来存储每个上传任务。在 uploadFiles 方法中,我们遍历 uploadTasks 列表,并为每个任务创建相应的 http.MultipartRequest 请求对象。在上传过程中,我们更新每个任务的 bytesUploaded 属性。
    
    最后,我们可以使用 StreamBuilder 来监听上传任务列表的变化,并显示每个任务的百分比:
    
    dart
    Widget buildUploadProgress() {
      return ListView.builder(
        itemCount: uploadTasks.length,
        itemBuilder: (context, index) {
          final task = uploadTasks[index];
    
          return ListTile(
            title: Text(task.file.name),
            subtitle: Text('${(task.bytesUploaded / task.totalBytes * 100).toStringAsFixed(2)}%'),
            trailing: IconButton(
              icon: Icon(Icons.pause),
              onPressed: () {
                // 暂停上传任务
                pauseUpload(index);
              },
            ),
          );
        },
      );
    }
    
    void pauseUpload(int index) {
      // 取消对应索引的任务上传请求
      uploadTasks[index].cancel();
    }
    在上述代码中,我们使用 ListView.builder 来构建一个任务列表,并为每个任务显示文件名和上传进度。对于每个任务,我们还添加了一个暂停按钮,通过点击该按钮,你可以调用 pauseUpload 方法来取消对应索引的任务上传请求。
    
    你可以将 buildUploadProgress 方法放在适当的页面中进行调用,以便实时显示上传任务的进度。
    

    相关文章

      网友评论

          本文标题:监听上传任务进度百分比

          本文链接:https://www.haomeiwen.com/subject/htkapdtx.html