优化图片上传

src/components/Upload/Image.vue

@@ -69,8 +69,8 @@
   import { ElNotification, formContextKey, formItemContextKey } from 'element-plus';
   import type { UploadProps, UploadRequestOptions } from 'element-plus';
   import { generateUUID } from '@/utils/auth';
-  import { upload,getOssConfig } from '@/api/common';
+  import { upload, getOssConfig } from '@/api/common';
-  import OSS from "ali-oss";
+  import OSS from 'ali-oss';
   import Cropper from '@/components/Upload/cropper.vue';
 
   interface UploadFileProps {
@@ -143,9 +143,13 @@
   const loading = ref(false);
   const progress = ref(0);
   const cropperSuccess = (fileChile: any) => {
-    actionFile(fileChile);
+    actionFiles(fileChile);
   };
-  //接口上传
+
+  /**
+   * 上传本地
+   * @param fileChild 文件
+   */
   const actionFile = async (fileChild: any) => {
     loading.value = true;
     try {
@@ -165,29 +169,36 @@
       loading.value = false;
     }
   };
-  //oss上传
+
-  const actionFiles=async (fileChild:any)=>{
+  /**
-    const configData = await getOssConfig()
+   * 上传OSS
+   * @param fileChild 文件
+   */
+  const actionFiles = async (fileChild: any) => {
+    const configData = await getOssConfig();
     let date = new Date();
     let year = date.getFullYear();
     let month: string | number = date.getMonth() + 1;
-    month = month < 10 ? ("0" + month) : month;
+    month = month < 10 ? '0' + month : month;
     let day: string | number = date.getDate();
-    day = day < 10 ? ("0" + day) : day;
+    day = day < 10 ? '0' + day : day;
     let h: string | number = date.getHours();
-    h = h < 10 ? ("0" + h) : h;
+    h = h < 10 ? '0' + h : h;
     let minute: string | number = date.getMinutes();
-    minute = minute < 10 ? ("0" + minute) : minute;
+    minute = minute < 10 ? '0' + minute : minute;
     let second: string | number = date.getSeconds();
-    second = second < 10 ? ("0" + second) : second;
+    second = second < 10 ? '0' + second : second;
-    let time = h + "" + minute + "" + second;
+    let time = h + '' + minute + '' + second;
-    let filterFileName=time + "-" + fileChild.name
+    let filterFileName = time + '-' + fileChild.name;
-    filterFileName=filterFileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '')
+    filterFileName = filterFileName.replace(
-    let filePath = props.name + "/" + year + "/" + month + "/" + day + "/" + filterFileName;
+      /[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g,
-    loading.value=true
+      '',
+    );
+    let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + filterFileName;
+    loading.value = true;
     try {
       const headers = {
-        "Access-Control-Allow-Origin": "*"
+        'Access-Control-Allow-Origin': '*',
       };
       const client = new OSS({
         // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
@@ -199,36 +210,40 @@
         accessKeySecret: configData.oss_accessKeySecret,
         // 填写Bucket名称。
         bucket: configData.oss_bucketName,
-        timeout: 600000
+        timeout: 600000,
       });
-      const res = await client.multipartUpload(filePath,fileChild, {
+      const res = await client.multipartUpload(filePath, fileChild, {
         headers: headers,
         // 获取分片上传进度、断点和返回值。
         progress: (p, cpt, res) => {
-          progress.value= parseFloat(parseFloat(p * 100).toFixed(2))
+          progress.value = parseFloat(parseFloat(p * 100).toFixed(2));
-          handleHttpUploadOptions.value.onProgress({percent: progress.value});
+          handleHttpUploadOptions.value.onProgress({ percent: progress.value });
         },
         // 设置并发上传的分片数量。
         parallel: 4,
         // 设置分片大小。默认值为1 MB，最小值为100 KB。
         partSize: 1024 * 1024,
         // headers,
-        mime: fileChild.type
+        mime: fileChild.type,
       });
-      emit('update:imageUrl',res.res.requestUrls[0]);
+      emit('update:imageUrl', configData.oss_domain + res.name);
-      emit('changeFileName',fileChild.name)
+      emit('changeFileName', fileChild.name);
       // 调用 el-form 内部的校验方法（可自动校验）
       formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
     } catch (error) {
-      emit('update:imageUrl','');
+      emit('update:imageUrl', '');
-      emit('changeFileName','')
+      emit('changeFileName', '');
-    }finally {
+    } finally {
-      progress.value=0
+      progress.value = 0;
-      loading.value=false
+      loading.value = false;
     }
-}
+  };
   const handleHttpUploadOptions = ref({});
 
+  /**
+   * 执行文件上传
+   * @param options 参数
+   */
   const handleHttpUpload = async (options: UploadRequestOptions) => {
     handleHttpUploadOptions.value = options;
     if (props.cropper) {
@@ -247,7 +262,7 @@
       };
       return;
     }
-    actionFile(options.file);
+    actionFiles(options.file);
   };
 
   /**
@@ -359,7 +374,7 @@
           background-color: transparent;
           border: 1px dashed var(--el-border-color-darker);
           border-radius: v-bind(borderRadius);
-          padding:5px;
+          padding: 5px;
           &:hover {
             border: 1px dashed var(--el-color-primary);
           }