代码优化

zyd_public/WangEditor/compressImage.js

+
+export default function(file, callBack) {
+  // 有损压缩
+  let fileSizeMb = file.size / 1024 / 1024;
+  let fileName = file.name;
+  debugger;
+  if (fileSizeMb < 2) {  // 2MB 以下的图片不需要压缩。
+    callBack(file);
+    return;
+  }
+  let reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = (e) => {
+    //这里的e.target.result就是转换后base64格式的图片文件
+    let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
+    image.src = e.target.result;
+    image.onload = () => {
+      let canvas = document.createElement('canvas');
+      let context = canvas.getContext('2d');
+      let imageWidth = image.width * (2 / fileSizeMb);    // 超过2兆的图片 按比例压缩
+      let imageHeight = image.height * (2 / fileSizeMb); // 超过2兆的图片 按比例压缩
+      let data = '';
+      canvas.width = imageWidth;
+      canvas.height = imageHeight;
+      context.drawImage(image, 0, 0, imageWidth, imageHeight);
+      data = canvas.toDataURL('image/jpeg');
+      const dataURLtoFile = (dataurl, filename) => {//将base64转换为文件
+        let arr = dataurl.split(',');
+        let mime = arr[0].match(/:(.*?);/)[1];
+
+        let bstr = atob(arr[1]);
+        let n = bstr.length;
+        let u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new File([u8arr], filename, { type: mime });
+      };
+      callBack(dataURLtoFile(data, fileName));
+      //压缩完成
+    };
+  };
+};

zyd_public/WangEditor/wangEditorComponent.js

@@ -16,6 +16,7 @@
 import React, { useState, useEffect } from 'react';
 import WangEditor from './includes/wangEditor.min';
 import uploadFile from './uploadFile';
+import compressImage from '@/webPublic/zyd_public/WangEditor/compressImage';
 
 let editor = null;
 export default function Index({
@@ -49,11 +50,15 @@ export default function Index({
 
 		editor.config.customUploadImg = function(resultFiles, insertImgFn) {
 			// 重写上传图片的方法
-			uploadFile({ file: resultFiles[0] }).then((y) => {
+      compressImage(resultFiles[0], (fileNew) => {
+        return ;
+        uploadFile({ file: fileNew }).then((y) => {
           if (y && y.url) {
             insertImgFn(y.url);
           }
         });
+      })
+
 			// insertImgFn(imgUrl);
 		};