监听上传任务进度百分比
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 方法放在适当的页面中进行调用,以便实时显示上传任务的进度。