增加轮播图压缩功能

package.json

@@ -42,6 +42,7 @@
     "braft-utils": "^3.0.12",
     "braft-utils": "^3.0.12",
     "browserslist": "^4.14.7",
     "browserslist": "^4.14.7",
     "classnames": "^2.2.5",
     "classnames": "^2.2.5",
+    "compressorjs": "^1.2.1",
     "core-js": "^3.6.4",
     "core-js": "^3.6.4",
     "cssnano": "^4.1.10",
     "cssnano": "^4.1.10",
     "draftjs-utils": "^0.9.4",
     "draftjs-utils": "^0.9.4",

src/common/UploadImageCover/index.js

@@ -17,6 +17,7 @@ import {
   message,
   message,
 } from "antd";
 } from "antd";
 import Cropper from "react-cropper";
 import Cropper from "react-cropper";
+import Compressor from 'compressorjs';
 import "./cropper.css"; //必须引入该css文件！
 import "./cropper.css"; //必须引入该css文件！
 import { connect } from "react-redux";
 import { connect } from "react-redux";
 
 
@@ -126,11 +127,21 @@ class UploadImageCover extends Component {
     let randomNumber = Math.floor(Math.random() * 999999)
     let randomNumber = Math.floor(Math.random() * 999999)
       .toString()
       .toString()
       .padStart(6, "0");
       .padStart(6, "0");
-    var file = dataURLtoFile(
-      this.state.imgbase.replace(" ", "").replace("\n", ""),
-      randomNumber
-    );
+
+    // 将base64转换为Blob并压缩
+    fetch(this.state.imgbase)
+      .then(res => res.blob())
+      .then(blob => {
+        new Compressor(blob, {
+          quality: 0.7, // 压缩质量(0-1)，值越小压缩率越高
+          maxWidth: 1200, // 最大宽度限制
+          maxHeight: 1200, // 最大高度限制
+          success: (compressedBlob) => {
+            // 创建压缩后的文件对象
+            const file = new File([compressedBlob], `${randomNumber}.jpg`, { type: 'image/jpeg' });
             formData.append("file", file);
             formData.append("file", file);
+
+            // 继续原有上传逻辑
             request({
             request({
               url: `POST ${services.uploadsApi}`,
               url: `POST ${services.uploadsApi}`,
               data: formData,
               data: formData,
@@ -143,70 +154,16 @@ class UploadImageCover extends Component {
                   this.props.getImgUrl(res.data);
                   this.props.getImgUrl(res.data);
                 }
                 }
               );
               );
+            }).catch(err => {
+              message.error('上传失败，请重试');
+            });
+          },
+          error: (err) => {
+            console.error('压缩失败:', err);
+            message.error('图片压缩失败，请重试');
+          }
+        });
       });
       });
-
-    // 读取阿里云秘钥
-    // const { param } = this.props;
-    // if (param !== null) {
-    //   this.setState(
-    //     {
-    //       uploadParams: {
-    //         Filename:
-    //           param.dir +
-    //           "/" +
-    //           this.state.uid +
-    //           "." +
-    //           this.state.selectImgName.split(".")[1],
-    //         key:
-    //           param.dir +
-    //           "/" +
-    //           this.state.uid +
-    //           "." +
-    //           this.state.selectImgName.split(".")[1],
-    //         policy: param.policy,
-    //         OSSAccessKeyId: param.accessid,
-    //         success_action_status: "200",
-    //         signature: param.signature,
-    //       },
-    //       uploadAction: param.host,
-    //       hostAndDir: param.host + "/" + param.dir,
-    //     },
-    //     () => {
-    //       let formData = new FormData();
-    //       for (let i in this.state.uploadParams) {
-    //         formData.append(i, this.state.uploadParams[i]);
-    //       }
-
-    //       var file = dataURLtoFile(this.state.imgbase, "2019009999999999");
-    //       formData.append("file", file);
-    //       const instance = axios.create({
-    //         withCredentials: false,
-    //       });
-    //       instance
-    //         .post(this.state.uploadAction, formData)
-    //         .then(res => {
-    //           console.log("ok", res);
-    //           if (res.status === 200) {
-    //             this.setState(
-    //               {
-    //                 imgDoneSrc:
-    //                   this.state.uploadAction +
-    //                   "/" +
-    //                   this.state.uploadParams.Filename,
-    //                 editImageModalVisible: false,
-    //               },
-    //               () => {
-    //                 this.props.getImgUrl(this.state.imgDoneSrc);
-    //               }
-    //             );
-    //           }
-    //         })
-    //         .catch(function(error) {
-    //           console.log("err", error.message);
-    //         });
-    //     }
-    //   );
-    // }
   };
   };
   crop = e => {
   crop = e => {
     // console.log(e);
     // console.log(e);