fix progress

miniprogram/pages/main/journal-creater/index.ts

@@ -4,6 +4,7 @@ import Time from "../../../utils/Time";
 import Toolkit from "../../../utils/Toolkit";
 import config from "../../../config/index";
 import { JournalType } from "../../../types/Journal";
+import IOSize, { Unit } from "../../../utils/IOSize";
 
 enum MediaItemType {
 	IMAGE,
@@ -34,6 +35,11 @@ interface JournalEditorData {
 	location?: Location;
 	qqMapSDK?: any;
 	isAuthLocation: boolean;
+	uploaded: string;
+	uploadTotal: string;
+	uploadSpeed: string;
+	uploadProgress: number;
+	isSubmitting: boolean;
 }
 
 Page({
@@ -44,13 +50,15 @@ Page({
 		type: JournalType.NORMAL,
 		mediaList: [],
 		location: undefined,
-		submitText: "提交",
+		isAuthLocation: false,
+		uploaded: "0",
+		uploadTotal: "0 MB",
+		uploadSpeed: "0 MB / s",
+		uploadProgress: 0,
 		isSubmitting: false,
-		submitProgress: 0,
 		mediaItemTypeEnum: {
 			...MediaItemType
-		},
-		isAuthLocation: false
+		}
 	},
 	async onLoad() {
 		// 授权定位
@@ -194,16 +202,15 @@ Page({
 	submit() {
 		const handleFail = () => {
 			wx.showToast({ title: "上传失败", icon: "error" });
+			wx.hideLoading();
 			this.setData({
-				submitText: "提交",
 				isSubmitting: false
-			})
+			});
 		};
 
 		this.setData({
-			submitText: "正在提交..",
 			isSubmitting: true
-		})
+		});
 
 		// 获取 openId
 		const getOpenId = new Promise<string>((resolve, reject) => {
@@ -239,51 +246,97 @@ Page({
 		// 文件上传
 		const uploadFiles = new Promise<string[]>((resolve, reject) => {
 			const mediaList = this.data.mediaList || [];
-			const total = mediaList.length;
-			let completed = 0;
-
-			if (total === 0) {
+			if (mediaList.length === 0) {
 				resolve([]);
 				return;
 			}
-			// 更新进度初始状态
-			this.setData({
-				submitProgress: 0,
-			});
 
-			const uploadPromises = mediaList.map((item) => {
-				return new Promise<string>((uploadResolve, uploadReject) => {
-					wx.uploadFile({
-						url: `${config.url}/temp/file/upload`,
+			wx.showLoading({ title: "正在上传..", mask: true });
+
+			// 计算总大小
+			const sizePromises = mediaList.map(item => {
+				return new Promise<number>((sizeResolve, sizeReject) => {
+					wx.getFileSystemManager().getFileInfo({
 						filePath: item.path,
-						name: "file",
-						success: (resp) => {
-							const result = JSON.parse(resp.data);
-							if (result && result.code === 20000) {
-								completed++;
-								// 更新进度
-								this.setData({
-									submitProgress: (completed / total),
-								});
-								uploadResolve(result.data[0].id);
-							} else {
-								uploadReject(new Error(`文件上传失败: ${result?.message || '未知错误'}`));
-							}
-						},
-						fail: (err) => uploadReject(new Error(`文件上传失败: ${err.errMsg}`))
+						success: (res) => sizeResolve(res.size),
+						fail: (err) => sizeReject(err)
 					});
 				});
 			});
-			// 并行执行所有文件上传
-			Promise.all(uploadPromises).then((tempFileIds) => {
+			Promise.all(sizePromises).then(fileSizes => {
+				const totalSize = fileSizes.reduce((acc, size) => acc + size, 0);
+				const uploadTasks: WechatMiniprogram.UploadTask[] = [];
+				let uploadedSize = 0;
+				let lastUploadedSize = 0;
+
 				this.setData({
-					submitProgress: 1,
+					uploadTotal: IOSize.format(totalSize, 2, Unit.MB)
+				});
+				// 计算上传速度
+				const speedUpdateInterval = setInterval(() => {
+					const chunkSize = uploadedSize - lastUploadedSize;
+					this.setData({
+						uploadSpeed: `${IOSize.format(chunkSize)} / s`
+					});
+					lastUploadedSize = uploadedSize;
+				}, 1000);
+				// 上传文件
+				const uploadPromises = mediaList.map(item => {
+					return new Promise<string>((uploadResolve, uploadReject) => {
+						const task = wx.uploadFile({
+							url: `${config.url}/temp/file/upload`,
+							filePath: item.path,
+							name: "file",
+							success: (resp) => {
+								const result = JSON.parse(resp.data);
+								if (result && result.code === 20000) {
+									uploadResolve(result.data[0].id);
+								} else {
+									uploadReject(new Error(`文件上传失败: ${result?.message || "未知错误"}`));
+								}
+							},
+							fail: (err) => uploadReject(new Error(`文件上传失败: ${err.errMsg}`))
+						});
+
+						// 监听上传进度
+						let prevProgress = 0;
+						task.onProgressUpdate((res) => {
+							const fileUploaded = (res.totalBytesExpectedToSend * res.progress) / 100;
+							const delta = fileUploaded - prevProgress;
+							uploadedSize += delta;
+							prevProgress = fileUploaded;
+
+							// 更新进度条
+							this.setData({
+								uploaded: IOSize.formatWithoutUnit(uploadedSize, 2, Unit.MB),
+								uploadProgress: Math.round((uploadedSize / totalSize) * 10000) / 100
+							});
+						});
+						uploadTasks.push(task);
+					});
+				});
+
+				Promise.all(uploadPromises).then((tempFileIds) => {
+					// 清除定时器
+					clearInterval(speedUpdateInterval);
+					uploadTasks.forEach(task => task.offProgressUpdate());
+					this.setData({
+						uploadProgress: 100,
+						uploadSpeed: "0 MB / s"
+					});
+					resolve(tempFileIds);
+				}).catch((e: Error) => {
+					// 取消所有上传任务
+					uploadTasks.forEach(task => task.abort());
+					clearInterval(speedUpdateInterval);
+					reject(e);
 				});
-				resolve(tempFileIds);
 			}).catch(reject);
 		});
+
 		// 并行执行获取 openId 和文件上传
 		Promise.all([getOpenId, uploadFiles]).then(([openId, tempFileIds]) => {
+			wx.showLoading({ title: "正在保存..", mask: true });
 			wx.request({
 				url: `${config.url}/journal/create`,
 				method: "POST",
@@ -300,22 +353,24 @@ Page({
 					createdAt: Date.parse(`${this.data.date} ${this.data.time}`),
 					tempFileIds
 				},
-				success: async (resp: any) => {
+				success: async () => {
 					Events.emit("JOURNAL_REFRESH");
 					wx.showToast({ title: "提交成功", icon: "success" });
 					this.setData({
 						idea: "",
 						mediaList: [],
-						submitText: "提交",
 						isSubmitting: false,
+						uploaded: "0",
+						uploadTotal: "0 MB",
+						uploadProgress: 0
 					});
 					await Toolkit.sleep(1000);
 					wx.switchTab({
-						url: "/pages/main/journal/index",
-					})
+						url: "/pages/main/journal/index"
+					});
 				},
 				fail: handleFail
 			});
 		}).catch(handleFail);
 	}
-});
+});