监听上传任务进度百分比

2023-08-09  本文已影响0人  xieyinghao
要监听多个上传任务的百分比并显示每个任务的进度,你可以使用 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 方法放在适当的页面中进行调用,以便实时显示上传任务的进度。
上一篇下一篇

猜你喜欢

热点阅读