fix：上传图片前压缩图片

package.json

@@ -23,6 +23,7 @@
     "@types/echarts": "^4.9.10",
     "ant-design-vue": "^1.7.7",
     "axios": "^0.21.1",
+    "compressorjs": "^1.1.1",
     "core-js": "^3.6.5",
     "echarts": "^5.2.0",
     "element-ui": "^2.15.5",

src/components/Editor/editorUpload.vue

@@ -9,6 +9,7 @@
       action="/proxyApi/api/v1/image/upload"
       :accept="ACCEPT_IMAGE_TYPE"
       :before-upload="beforeUpload"
+      :transformFile="transformFile"
       @change="handleChange"
     >
       <img v-if="imageUrl" :src="imageUrl" />
@@ -32,6 +33,7 @@ import {
   TOAST_TEXT2,
   MAX_IMAGE_SIZE,
 } from '@/const/config/upload'
+import compress from '@/utils/image/compress';
 
 
 function getBase64(img: Blob, callback: (any: any) => void) {
@@ -64,6 +66,10 @@ export default Vue.extend({
     }
   },
   methods:{
+    transformFile(file: File){
+      console.log('transformFile');
+      return compress(file)
+    },
     handleChange(info:any) {
     if (info.file.status === 'uploading') {
       this.loading = true;
@@ -84,11 +90,11 @@ export default Vue.extend({
       if (!isAccpet) {
         message.error(TOAST_TEXT)
       }
-      const isLt4M = file.size < MAX_IMAGE_SIZE
-      if (!isLt4M) {
+      const isLessThenMaxImageSize = file.size < MAX_IMAGE_SIZE
+      if (!isLessThenMaxImageSize) {
         message.error(TOAST_TEXT2)
       }
-      return isAccpet && isLt4M
+      return isAccpet && isLessThenMaxImageSize
     },
   }
 })

src/const/config/upload.ts

-export const ACCEPT_IMAGE_TYPE = '.jpg,.jpep,.png'
+export const ACCEPT_IMAGE_TYPE = '.jpg,.jpeg,.png'
 
 export function isAcceptImageType(file: File) {
-  const isCorrectType = file.name.match(/(\.jpg|\.jpep|\.png)$/)
+  const isCorrectType = file.name.match(/(\.jpg|\.jpeg|\.png)$/)
   return !!isCorrectType
 }
 
-export const TOAST_TEXT = '请上传jpg或jpep或png文件'
+export const TOAST_TEXT = '请上传jpg或jpeg或png文件'
 
-// 最大上传大小 40M
-export const MAX_IMAGE_SIZE = 1024 * 1024 * 40
+export const MAX_IMAGE_SIZE = 1024 * 1024 * 12
 
-export const TOAST_TEXT2 = '请上传小于40M的图片'
+export const TOAST_TEXT2 = `请上传小于${MAX_IMAGE_SIZE / 1024 / 1024}M的图片`

src/service/FileService/index.ts

+import compress from '@/utils/image/compress'
 import baseAxios from '../index'
 export default class FileService {
   static instance: FileService
@@ -33,12 +34,14 @@ export default class FileService {
   }
 
   uploadImage(uploadFile: File) {
+    return compress(uploadFile).then((ret) => {
       const fd = new FormData()
-    fd.append('uploadFile', uploadFile)
+      fd.append('uploadFile', ret)
       return baseAxios<string>({
         method: 'post',
         url: '/image/upload',
         data: fd,
       })
+    })
   }
 }

src/utils/image/compress.ts

+import Compressor from 'compressorjs'
+
+export default function (file: Blob | File): Promise<File | Blob> {
+  return new Promise((resolve, reject) => {
+    new Compressor(file, {
+      quality: 0.6,
+      success: (result) => {
+        if (file instanceof File) resolve(new File([result], file.name))
+        else resolve(result)
+      },
+      error: (result) => {
+        reject(result)
+      },
+    })
+  })
+}

src/views/Root/Activity/detail.vue

@@ -3,7 +3,7 @@
     <p class="text-2xl font-bold mb-5">{{ title }}</p>
     {{ $route.query.id }}
     <p class="text-gray-400">操作时间：{{ time | formatDate }}</p>
-    <img v-if="imageUrl" :src="imageUrl" class="mx-auto my-5" />
+    <img v-if="imageUrl" :src="imageUrl" class="mx-auto my-5 max-h-64" />
     <div class="text-left p-5 el-tiptap-editor editor" v-html="content">
       {{ content }}
     </div>

src/views/Root/Banner/index.vue

@@ -43,6 +43,7 @@
         <a-form-model-item label="上传图片" :required="true" prop="fileList">
           <a-upload
             :beforeUpload="beforeUpload"
+            :transformFile="transformFile"
             name="uploadFile"
             action="/proxyApi/api/v1/image/upload"
             :accept="ACCEPT_IMAGE_TYPE"
@@ -154,6 +155,7 @@ import { PAGE_SIZE } from '@/const/config/page'
 import { iBannerItem } from '@/service/BannerManagementService/types'
 import { eBannerStatus } from '@/types/banner'
 import FileService from '@/service/FileService/index'
+import compress from '@/utils/image/compress'
 
 export default Vue.extend({
   components: {
@@ -296,18 +298,21 @@ export default Vue.extend({
       } catch (err) {}
       this.modalLoading = false
     },
+    transformFile(file: File){
+      return compress(file)
+    },
     beforeUpload(file: File) {
       const isAccpet = isAcceptImageType(file)
       if (!isAccpet) {
         message.error(TOAST_TEXT)
       }
-      const isLt4M = file.size < MAX_IMAGE_SIZE
-      if (!isLt4M) {
+      const isLessThenMaxImageSize = file.size < MAX_IMAGE_SIZE
+      if (!isLessThenMaxImageSize) {
         message.error(TOAST_TEXT2)
       }
-      console.log(isAccpet && isLt4M)
+      console.log(isAccpet && isLessThenMaxImageSize)
 
-      return isAccpet && isLt4M
+      return isAccpet && isLessThenMaxImageSize
     },
     handleChange(info: any) {
       console.log(info, 'show info')