Quellcode durchsuchen

修改图片上传大小

zengjun vor 6 Monaten
Ursprung
Commit
781e6b02dc
1 geänderte Dateien mit 32 neuen und 3 gelöschten Zeilen
  1. 32 3
      src/views/returned/register/index.vue

+ 32 - 3
src/views/returned/register/index.vue

@@ -31,7 +31,7 @@
           <van-uploader
             v-model="outerImages"
             :max-count="5"
-            :max-size="10 * 1024 * 1024"
+            :max-size="5 * 1024 * 1024"
             :before-read="beforeReadImage"
             :preview-full-image="true"
             :deletable="true"
@@ -43,7 +43,7 @@
           <van-uploader
             v-model="innerImages"
             :max-count="5"
-            :max-size="10 * 1024 * 1024"
+            :max-size="5 * 1024 * 1024"
             :before-read="beforeReadImage"
             :preview-full-image="true"
             :deletable="true"
@@ -117,17 +117,46 @@ const beforeReadImage = (file) => {
   return true
 }
 
+
 // 提交时上传:这里提供示例函数,后续可替换为真实上传API
 const simulateUpload = async (file,type) => {
   // 模拟网络耗时
+  const compressedFile = await compressImage(file, 0.5)
   const data = new FormData()
-  data.set('file',file)
+  data.set('file',compressedFile)
   data.set('type',type)
   await detailImageUpload(data)
   // 返回可预览URL(示例)
   return { url: URL.createObjectURL(file) }
 }
 
+const compressImage = (file, quality = 0.5) => {
+  return new Promise((resolve) => {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    const img = new Image()
+    img.onload = () => {
+      // 计算新尺寸(设置为原来的一半)
+
+      // 设置canvas尺寸
+      canvas.width = img.width
+      canvas.height = img.height
+
+      // 在canvas上绘制调整后的图片
+      ctx.drawImage(img, 0, 0, img.width, img.height)
+      // 将canvas转换为Blob对象
+      canvas.toBlob(resolve, 'image/jpeg', quality)
+    }
+
+    // 读取上传的图片文件
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      img.src = e.target.result
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
 const uploadCategory = async (list, categoryName) => {
   // 逐张上传,保持与“单张选择”一致
   for (const item of list) {