fix progress

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

@@ -6,6 +6,7 @@ import config from "../../../config/index";
 import { Location, MediaItem, MediaItemType, WechatMediaItem } from "../../../types/UI";
 import { Journal, JournalType } from "../../../types/Journal";
 import { MediaAttachExt, MediaAttachType } from "../../../types/Attachment";
+import IOSize, { Unit } from "../../../utils/IOSize";
 
 interface JournalEditorData {
 	id?: number;
@@ -18,9 +19,11 @@ interface JournalEditorData {
 	location?: Location;
 	isAuthLocation: boolean;
 	isLoading: boolean;
-	saveText: string;
 	isSaving: boolean;
-	saveProgress: number;
+	uploaded: string;
+	uploadTotal: string;
+	uploadSpeed: string;
+	uploadProgress: number;
 	mediaItemTypeEnum: any;
 	deleteDialogVisible: boolean;
 	deleteConfirmText: string;
@@ -36,10 +39,12 @@ Page({
 		mediaList: [],
 		newMediaList: [],
 		location: undefined,
-		saveText: "保存",
 		isSaving: false,
-		saveProgress: 0,
 		isLoading: true,
+		uploaded: "0",
+		uploadTotal: "0 MB",
+		uploadSpeed: "0 MB / s",
+		uploadProgress: 0,
 		mediaItemTypeEnum: {
 			...MediaItemType
 		},
@@ -300,63 +305,111 @@ Page({
 	save() {
 		const handleFail = () => {
 			wx.showToast({ title: "保存失败", icon: "error" });
+			wx.hideLoading();
 			this.setData({
-				saveText: "保存",
 				isSaving: false
 			});
 		};
-
 		this.setData({
-			saveText: "正在保存..",
 			isSaving: true
 		});
 		// 收集保留的附件 ID（缩略图 ID）
 		const attachmentIds = this.data.mediaList.map(item => item.attachmentId);
+
 		// 上传新媒体文件
 		const uploadFiles = new Promise<string[]>((resolve, reject) => {
-			const total = this.data.newMediaList.length;
-			let completed = 0;
-			if (total === 0) {
+			if (this.data.newMediaList.length === 0) {
 				resolve([]);
 				return;
 			}
-			this.setData({
-				saveProgress: 0,
-			});
-			// 上传临时文件
-			const uploadPromises = this.data.newMediaList.map((item) => {
-				return new Promise<string>((uploadResolve, uploadReject) => {
-					wx.uploadFile({
-						url: `${config.url}/temp/file/upload`,
+
+			wx.showLoading({ title: "正在上传..", mask: true });
+
+			// 计算总大小
+			const sizePromises = this.data.newMediaList.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({
-									saveProgress: (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({
-					saveProgress: 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 = this.data.newMediaList.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);
 		});
 		// 提交保存
 		uploadFiles.then((tempFileIds) => {
+			wx.showLoading({ title: "正在保存..", mask: true });
 			wx.request({
 				url: `${config.url}/journal/update`,
 				method: "POST",
@@ -382,8 +435,10 @@ Page({
 						Events.emit("JOURNAL_LIST_REFRESH");
 						wx.showToast({ title: "保存成功", icon: "success" });
 						this.setData({
-							saveText: "保存",
 							isSaving: false,
+							uploaded: "0",
+							uploadTotal: "0 MB",
+							uploadProgress: 0
 						});
 						await Toolkit.sleep(1000);
 						wx.navigateBack();