From 0593edb9727cf413ad59db633b683a087b2f16a7 Mon Sep 17 00:00:00 2001 From: congzc Date: Thu, 10 Aug 2023 17:49:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8E=8B=E7=BC=A9=E5=92=8C?= =?UTF-8?q?=E4=B8=8B=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- src/pages/home/index.vue | 35 ++++++++++++++++++--- src/pages/lookPhoto/index.vue | 44 +++++++++++++++++++++++---- src/pages/uploadPhoto/uploadPhoto.vue | 35 +++++++++++++++------ yarn.lock | 12 ++++++++ 5 files changed, 109 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 4e1fc07..982ab4d 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001", "@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001", "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001", + "browser-image-compression": "^2.0.2", "clipboard": "^2.0.11", "dayjs": "^1.11.9", "pinia": "2.0.33", @@ -69,4 +70,4 @@ "sass-loader": "13.2.2", "vite": "4.1.4" } -} \ No newline at end of file +} diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 8eb0f56..d666df4 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -76,19 +76,46 @@ import { ref, reactive } from "vue"; import { voiceTotalApi } from "../../api/login.js"; +import { userInfoModules } from "@/store/modules/userInfo"; +import imageCompression from "browser-image-compression"; //压缩图片插件 //#endregion - +const userInfoModulesPinia = userInfoModules(); //#region 头像 const avatarUrl = ref(null); function chooseAvatar(params) { uni.chooseImage({ count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 - success: (res) => { - const tempFilePaths = res.tempFilePaths; - avatarUrl.value = tempFilePaths[0]; + success: async (res) => { + // avatarUrl.value = res.tempFilePaths[0]; // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 // 示例代码: // uploadImageToServer(tempFilePaths[0]); + // 图片压缩 + console.log(res.tempFiles[0].size); + if (userInfoModulesPinia.platForm != 1) { + uni.compressImage({ + src: res.tempFilePaths[0], + quality: 20, + success: (res2) => { + avatarUrl.value = res2.tempFilePath; + console.log(res2.tempFilePath); + }, + }); + } else { + const options = { + maxSizeMB: 2, // 最大压缩大小为 4MB + useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 + }; + const compressedFile = await imageCompression( + res.tempFiles[0], + options + ); + //compressedFile是一个blob对象 + avatarUrl.value = URL.createObjectURL(compressedFile); + console.log(compressedFile); + // avatarUrl.value = compressedFile; + console.log("压缩图片h5"); + } }, fail: (err) => { console.error("选择图片失败", err); diff --git a/src/pages/lookPhoto/index.vue b/src/pages/lookPhoto/index.vue index de034ff..b87077f 100644 --- a/src/pages/lookPhoto/index.vue +++ b/src/pages/lookPhoto/index.vue @@ -2,7 +2,9 @@ @@ -53,18 +55,38 @@