瀏覽代碼

上传图片接口取消cos桶上传,改为接口上传

hzj18279462576@163.com 7 月之前
父節點
當前提交
41ea822699
共有 4 個文件被更改,包括 722 次插入384 次删除
  1. 69 0
      src/utils/imgYS.js
  2. 95 43
      src/views/apply/apply.vue
  3. 126 60
      src/views/info/info.vue
  4. 432 281
      src/views/user/user.vue

+ 69 - 0
src/utils/imgYS.js

@@ -0,0 +1,69 @@
+// utils/compressImage.js
+/**
+ * 压缩图片
+ * @param {File} file 图片文件
+ * @param {Number} maxSize 目标大小(KB)
+ * @returns {Promise} 返回压缩后的文件
+ */
+export function compressImage(file, maxSize) {
+  return new Promise((resolve, reject) => {
+    // 创建 FileReader
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // 计算压缩比例
+        let width = img.width;
+        let height = img.height;
+        const ratio = width / height;
+        
+        // 初始压缩质量
+        let quality = 0.8;
+        let canvasWidth = width;
+        let canvasHeight = height;
+        
+        // 设置画布大小
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+        
+        // 绘制图片
+        ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
+        
+        // 压缩函数
+        const compress = () => {
+          canvas.toBlob(
+            (blob) => {
+              // 获取压缩后的大小
+              const compressedSize = blob.size / 1024;
+              
+              // 如果大小符合要求或质量已经很低,则返回
+              if (compressedSize <= maxSize || quality <= 0.1) {
+                const compressedFile = new File([blob], file.name, {
+                  type: 'image/jpeg',
+                  lastModified: Date.now(),
+                });
+                resolve(compressedFile);
+                return;
+              }
+              
+              // 继续压缩
+              quality -= 0.1;
+              compress();
+            },
+            'image/jpeg',
+            quality
+          );
+        };
+        
+        compress();
+      };
+      img.onerror = (error) => reject(error);
+      img.src = e.target.result;
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsDataURL(file);
+  });
+}

+ 95 - 43
src/views/apply/apply.vue

@@ -61,7 +61,7 @@
                 <!-- <div class="look" @click="applyClick(scope.row)">打开项目</div> -->
                 <!-- <div class="look" @click="applyClick(scope.row)">打开项目</div> -->
                 <div class="look" @click="editClick(scope.row)">编辑</div>
                 <div class="look" @click="editClick(scope.row)">编辑</div>
                 <el-popconfirm
                 <el-popconfirm
-                  v-if="scope.row.appid!='wx2fc3f45732fae5d3'"
+                  v-if="scope.row.appid != 'wx2fc3f45732fae5d3'"
                   width="220"
                   width="220"
                   confirm-button-text="确认"
                   confirm-button-text="确认"
                   cancel-button-text="取消"
                   cancel-button-text="取消"
@@ -140,6 +140,7 @@
           <el-form-item label="logo图标 :" prop="logoUrl">
           <el-form-item label="logo图标 :" prop="logoUrl">
             <div class="xcxLogo">
             <div class="xcxLogo">
               <img
               <img
+                v-viewer
                 :src="editRuleForm.logoUrl"
                 :src="editRuleForm.logoUrl"
                 alt=""
                 alt=""
                 style="width: 80px; height: 80px"
                 style="width: 80px; height: 80px"
@@ -192,7 +193,8 @@
           </el-form-item>
           </el-form-item>
           <el-form-item
           <el-form-item
             v-if="
             v-if="
-              editRuleForm.type == '默认小程序' || editRuleForm.type == '自建小程序'
+              editRuleForm.type == '默认小程序' ||
+              editRuleForm.type == '自建小程序'
             "
             "
             label="APPID :"
             label="APPID :"
             prop="appid"
             prop="appid"
@@ -202,7 +204,7 @@
               placeholder="请输入APPID"
               placeholder="请输入APPID"
               clearable
               clearable
               style="width: 500px"
               style="width: 500px"
-              :disabled="editRuleForm.id?true:false"
+              :disabled="editRuleForm.id ? true : false"
             />
             />
           </el-form-item>
           </el-form-item>
           <el-form-item
           <el-form-item
@@ -219,7 +221,7 @@
               placeholder="请输入路径"
               placeholder="请输入路径"
               clearable
               clearable
               style="width: 500px"
               style="width: 500px"
-              :disabled="editRuleForm.id?true:false"
+              :disabled="editRuleForm.id ? true : false"
             />
             />
           </el-form-item>
           </el-form-item>
           <el-form-item label="应用简介 :" prop="content">
           <el-form-item label="应用简介 :" prop="content">
@@ -397,7 +399,11 @@ const getList = async () => {
     params: data,
     params: data,
   });
   });
   if (res.data.code == 200) {
   if (res.data.code == 200) {
-    console.log(res, JSON.parse(eds.decryptDes(res.data.data)),"应用管理分页数据");
+    console.log(
+      res,
+      JSON.parse(eds.decryptDes(res.data.data)),
+      "应用管理分页数据"
+    );
     loading.value = false;
     loading.value = false;
     tableData.list = JSON.parse(eds.decryptDes(res.data.data)).list;
     tableData.list = JSON.parse(eds.decryptDes(res.data.data)).list;
     total.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
     total.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
@@ -409,7 +415,7 @@ const getList = async () => {
     // });
     // });
   } else {
   } else {
     loading.value = false;
     loading.value = false;
-    if(res.data.message=='登录凭证已过期,请重新登录'){
+    if (res.data.message == "登录凭证已过期,请重新登录") {
       sessionStorage.removeItem("token");
       sessionStorage.removeItem("token");
       sessionStorage.removeItem("userhead");
       sessionStorage.removeItem("userhead");
       sessionStorage.removeItem("roleList");
       sessionStorage.removeItem("roleList");
@@ -439,13 +445,15 @@ const applyLink = (row) => {
   let charToCheck = "http";
   let charToCheck = "http";
 
 
   if (str.includes(charToCheck)) {
   if (str.includes(charToCheck)) {
-    if(row.descript=='领导驾驶舱'){
+    if (row.descript == "领导驾驶舱") {
       window.open(`${row.urlLink}?token=${sessionStorage.getItem("token")}`);
       window.open(`${row.urlLink}?token=${sessionStorage.getItem("token")}`);
-    }else{
-      window.open(row.urlLink)
+    } else {
+      window.open(row.urlLink);
     }
     }
   } else {
   } else {
-    window.open(`https://${row.urlLink}?token=${sessionStorage.getItem("token")}`);
+    window.open(
+      `https://${row.urlLink}?token=${sessionStorage.getItem("token")}`
+    );
   }
   }
 };
 };
 
 
@@ -463,6 +471,17 @@ const addApply = async () => {
 };
 };
 // 确定添加应用
 // 确定添加应用
 const confirmEdit = (formEl) => {
 const confirmEdit = (formEl) => {
+  console.log({
+    name: editRuleForm.name,
+    logo: editRuleForm.logoUrl,
+    category: editRuleForm.type,
+    urlLink: editRuleForm.applyLink,
+    descript: editRuleForm.content,
+    route: editRuleForm.route,
+    isTop: editRuleForm.switch,
+    appid: editRuleForm.appid,
+  });
+
   if (!formEl) return;
   if (!formEl) return;
   formEl.validate(async (valid, fields) => {
   formEl.validate(async (valid, fields) => {
     if (valid) {
     if (valid) {
@@ -547,49 +566,82 @@ const confirmEdit = (formEl) => {
 const typeSel = () => {
 const typeSel = () => {
   editRuleForm.applyLink = "";
   editRuleForm.applyLink = "";
   editRuleForm.route = "";
   editRuleForm.route = "";
-  editRuleForm.appid=""
+  editRuleForm.appid = "";
   editRuleForm.switch = 2;
   editRuleForm.switch = 2;
   // editRuleForm.id = "";
   // editRuleForm.id = "";
 };
 };
 // 封面图上传(------------------------------------------------------)
 // 封面图上传(------------------------------------------------------)
 // 添加照片时往fileList列表中添加图片信息(封面图上传图片)
 // 添加照片时往fileList列表中添加图片信息(封面图上传图片)
-const handleChange = (file, fileLists) => {
+const handleChange = async (file, fileLists) => {
   console.log(file, "file11111");
   console.log(file, "file11111");
   if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
   if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
     if (file.size / 1024 > 50) {
     if (file.size / 1024 > 50) {
       ElMessage.error("图片的大小不能超过50Kb!");
       ElMessage.error("图片的大小不能超过50Kb!");
     } else {
     } else {
       if (file.raw) {
       if (file.raw) {
-        const cos = new COS({
-          SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
-          SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
-          SecurityToken: "1306339220",
-          Bucket: "wanzai-1306339220",
-          Region: "ap-shanghai",
-        });
-        const files = file.raw;
-        console.log(files, "files文件");
-        const key = file.name; // 设置上传到 COS 后的文件名
-        cos.putObject(
-          {
-            Bucket: "wanzai-1306339220",
-            Region: "ap-shanghai",
-            Key: key,
-            Body: files,
-            onProgress: function (progressData) {
-              console.log(JSON.stringify(progressData));
-            },
+        // const cos = new COS({
+        //   SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
+        //   SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
+        //   SecurityToken: "1306339220",
+        //   Bucket: "wanzai-1306339220",
+        //   Region: "ap-shanghai",
+        // });
+        // const files = file.raw;
+        // console.log(files, "files文件");
+        // const key = file.name; // 设置上传到 COS 后的文件名
+        // cos.putObject(
+        //   {
+        //     Bucket: "wanzai-1306339220",
+        //     Region: "ap-shanghai",
+        //     Key: key,
+        //     Body: files,
+        //     onProgress: function (progressData) {
+        //       console.log(JSON.stringify(progressData));
+        //     },
+        //   },
+        //   function (err, data) {
+        //     if (err) {
+        //       console.error(err, "请求失败");
+        //     } else {
+        //       console.log(data, "请求成功");
+        //       editRuleForm.logoUrl = "https://" + data.Location;
+        //       // 成功
+        //     }
+        //   }
+        // );
+        const data = new FormData();
+        data.append("file", file.raw);
+        let res = await axios({
+          method: "post",
+          url: api.value + "/wanzai/api/file/uploadFile",
+          headers: {
+            token: sessionStorage.getItem("token"),
+            user_head: sessionStorage.getItem("userhead"),
           },
           },
-          function (err, data) {
-            if (err) {
-              console.error(err, "请求失败");
-            } else {
-              console.log(data, "请求成功");
-              editRuleForm.logoUrl = "https://" + data.Location;
-              // 成功
-            }
-          }
-        );
+          data: data,
+        });
+        if (res.data.code == 200) {
+          ElMessage({
+            type: "success",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+          console.log(
+            res,
+            JSON.parse(eds.decryptDes(res.data.data)),
+            "图片上传成功封面图"
+          );
+          let resData = JSON.parse(eds.decryptDes(res.data.data));
+          editRuleForm.logoUrl = resData.fileUrl;
+        } else {
+          ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+        }
       }
       }
     }
     }
   } else {
   } else {
@@ -677,8 +729,8 @@ const handleExceed = (files) => {
 
 
 //编辑按钮  (-------------------------------------------)
 //编辑按钮  (-------------------------------------------)
 const editClick = async (row) => {
 const editClick = async (row) => {
-  console.log(row,'编辑');
-  
+  console.log(row, "编辑");
+
   titleDialog.value = "编辑应用";
   titleDialog.value = "编辑应用";
   editVisible.value = true;
   editVisible.value = true;
   editRuleForm.name = row.name;
   editRuleForm.name = row.name;

+ 126 - 60
src/views/info/info.vue

@@ -644,43 +644,76 @@ const handleDelete = () => {
 };
 };
 
 
 // 校徽图上传(------------------------------------------------------)
 // 校徽图上传(------------------------------------------------------)
-const handleChange = (file, fileLists) => {
+const handleChange = async (file, fileLists) => {
   console.log(file, "file11111");
   console.log(file, "file11111");
   if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
   if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
     if (file.size / 1024 > 100) {
     if (file.size / 1024 > 100) {
       ElMessage.error("图片的大小不能超过100Kb!");
       ElMessage.error("图片的大小不能超过100Kb!");
     } else {
     } else {
       if (file.raw) {
       if (file.raw) {
-        const cos = new COS({
-          SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
-          SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
-          SecurityToken: "1306339220",
-          Bucket: "wanzai-1306339220",
-          Region: "ap-shanghai",
-        });
-        const files = file.raw;
-        console.log(files, "files文件");
-        const key = file.name; // 设置上传到 COS 后的文件名
-        cos.putObject(
-          {
-            Bucket: "wanzai-1306339220",
-            Region: "ap-shanghai",
-            Key: key,
-            Body: files,
-            onProgress: function (progressData) {
-              console.log(JSON.stringify(progressData));
-            },
+        // const cos = new COS({
+        //   SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
+        //   SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
+        //   SecurityToken: "1306339220",
+        //   Bucket: "wanzai-1306339220",
+        //   Region: "ap-shanghai",
+        // });
+        // const files = file.raw;
+        // console.log(files, "files文件");
+        // const key = file.name; // 设置上传到 COS 后的文件名
+        // cos.putObject(
+        //   {
+        //     Bucket: "wanzai-1306339220",
+        //     Region: "ap-shanghai",
+        //     Key: key,
+        //     Body: files,
+        //     onProgress: function (progressData) {
+        //       console.log(JSON.stringify(progressData));
+        //     },
+        //   },
+        //   function (err, data) {
+        //     if (err) {
+        //       console.error(err, "请求失败");
+        //     } else {
+        //       console.log(data, "请求成功");
+        //       schoolImg.value = "https://" + data.Location;
+        //       // 成功
+        //     }
+        //   }
+        // );
+        const data = new FormData();
+        data.append("file", file.raw);
+        let res = await axios({
+          method: "post",
+          url: api.value + "/wanzai/api/file/uploadFile",
+          headers: {
+            token: sessionStorage.getItem("token"),
+            user_head: sessionStorage.getItem("userhead"),
           },
           },
-          function (err, data) {
-            if (err) {
-              console.error(err, "请求失败");
-            } else {
-              console.log(data, "请求成功");
-              schoolImg.value = "https://" + data.Location;
-              // 成功
-            }
-          }
-        );
+          data: data,
+        });
+        if (res.data.code == 200) {
+          ElMessage({
+            type: "success",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+          console.log(
+            res,
+            JSON.parse(eds.decryptDes(res.data.data)),
+            "校徽图上传"
+          );
+          let resData = JSON.parse(eds.decryptDes(res.data.data));
+          schoolImg.value = resData.fileUrl;
+        } else {
+          ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+        }
       }
       }
     }
     }
   } else {
   } else {
@@ -697,43 +730,76 @@ const handleExceed = (files) => {
 };
 };
 
 
 // 管理平台logo图上传(------------------------------------------------------)
 // 管理平台logo图上传(------------------------------------------------------)
-const handleChange2 = (file, fileLists) => {
+const handleChange2 = async (file, fileLists) => {
   console.log(file, "file11111");
   console.log(file, "file11111");
   if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
   if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
     if (file.size / 1024 > 100) {
     if (file.size / 1024 > 100) {
       ElMessage.error("图片的大小不能超过100Kb!");
       ElMessage.error("图片的大小不能超过100Kb!");
     } else {
     } else {
       if (file.raw) {
       if (file.raw) {
-        const cos = new COS({
-          SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
-          SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
-          SecurityToken: "1306339220",
-          Bucket: "wanzai-1306339220",
-          Region: "ap-shanghai",
-        });
-        const files = file.raw;
-        console.log(files, "files文件");
-        const key = file.name; // 设置上传到 COS 后的文件名
-        cos.putObject(
-          {
-            Bucket: "wanzai-1306339220",
-            Region: "ap-shanghai",
-            Key: key,
-            Body: files,
-            onProgress: function (progressData) {
-              console.log(JSON.stringify(progressData));
-            },
+        // const cos = new COS({
+        //   SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
+        //   SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
+        //   SecurityToken: "1306339220",
+        //   Bucket: "wanzai-1306339220",
+        //   Region: "ap-shanghai",
+        // });
+        // const files = file.raw;
+        // console.log(files, "files文件");
+        // const key = file.name; // 设置上传到 COS 后的文件名
+        // cos.putObject(
+        //   {
+        //     Bucket: "wanzai-1306339220",
+        //     Region: "ap-shanghai",
+        //     Key: key,
+        //     Body: files,
+        //     onProgress: function (progressData) {
+        //       console.log(JSON.stringify(progressData));
+        //     },
+        //   },
+        //   function (err, data) {
+        //     if (err) {
+        //       console.error(err, "请求失败");
+        //     } else {
+        //       console.log(data, "请求成功");
+        //       logoImg.value = "https://" + data.Location;
+        //       // 成功
+        //     }
+        //   }
+        // );
+        const data = new FormData();
+        data.append("file", file.raw);
+        let res = await axios({
+          method: "post",
+          url: api.value + "/wanzai/api/file/uploadFile",
+          headers: {
+            token: sessionStorage.getItem("token"),
+            user_head: sessionStorage.getItem("userhead"),
           },
           },
-          function (err, data) {
-            if (err) {
-              console.error(err, "请求失败");
-            } else {
-              console.log(data, "请求成功");
-              logoImg.value = "https://" + data.Location;
-              // 成功
-            }
-          }
-        );
+          data: data,
+        });
+        if (res.data.code == 200) {
+          ElMessage({
+            type: "success",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+          console.log(
+            res,
+            JSON.parse(eds.decryptDes(res.data.data)),
+            "校徽图上传"
+          );
+          let resData = JSON.parse(eds.decryptDes(res.data.data));
+          logoImg.value = resData.fileUrl;
+        } else {
+          ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+        }
       }
       }
     }
     }
   } else {
   } else {

File diff suppressed because it is too large
+ 432 - 281
src/views/user/user.vue