From b48fe036169d3bf4b192dda17978b9a0617795d8 Mon Sep 17 00:00:00 2001
From: zjl <xx@qq.com>
Date: Mon, 23 Dec 2024 10:11:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8D=95=E5=9B=BE=E3=80=81?=
 =?UTF-8?q?=E5=A4=9A=E5=9B=BE=E3=80=81=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/Image.vue    | 97 +++++++++++++++++++-----------
 src/components/Upload/Images.vue   | 88 +++++++++++++++++----------
 src/components/Upload/file.vue     | 75 ++++++++++++++---------
 src/views/content/article/edit.vue |  3 +-
 4 files changed, 167 insertions(+), 96 deletions(-)

diff --git a/src/components/Upload/Image.vue b/src/components/Upload/Image.vue
index 68eca41..0af6f54 100644
--- a/src/components/Upload/Image.vue
+++ b/src/components/Upload/Image.vue
@@ -63,7 +63,7 @@
 <script setup lang="ts" name="UploadImg">
   import { ref, computed, inject } from 'vue';
   import { generateUUID } from '@/utils/auth';
-  import { upload,getOssConfig } from '@/api/common';
+  import { upload, getOssConfig } from '@/api/common';
   import {
     PlusOutlined,
     EditOutlined,
@@ -72,7 +72,11 @@
   } from '@ant-design/icons-vue';
   import { notification } from 'ant-design-vue';
   import Cropper from '@/components/Upload/croppers.vue';
-  import OSS from "ali-oss";
+  import OSS from 'ali-oss';
+
+  /**
+   * 定义参数
+   */
   interface UploadFileProps {
     imageUrl?: string; // 图片地址 ==> 必传
     uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
@@ -89,7 +93,9 @@
     cropperSize?: Object;
   }
 
-  // 接受父组件参数
+  /**
+   * 接受父组件参数
+   */
   const props = withDefaults(defineProps<UploadFileProps>(), {
     imageUrl: '',
     uploadFileUrl: '/admin/file/upload',
@@ -107,8 +113,11 @@
 
   // 生成组件唯一id
   const uuid = ref('id-' + generateUUID());
-
   const imgViewVisible = ref(false);
+
+  /**
+   * 执行图片预览
+   */
   const viewImg = () => {
     if (props.imageUrl.indexOf('.pdf') < 0) {
       imgViewVisible.value = true;
@@ -133,6 +142,9 @@
     (e: 'changeFileName', value: string): void;
   }
 
+  /**
+   * 定义参数
+   */
   const fileName = ref('');
   const oImg = ref('');
   const cropperVisible = ref(false);
@@ -140,10 +152,18 @@
   const loading = ref(false);
   const progress = ref(0);
 
+  /**
+   * 裁剪上传
+   * @param fileChile 参数
+   */
   const cropperSuccess = (fileChile: any) => {
     actionFile(fileChile);
   };
-  //接口上传
+
+  /**
+   * 本地接口上传
+   * @param fileChild 参数
+   */
   const actionFile = async (fileChild: any) => {
     loading.value = true;
     try {
@@ -162,29 +182,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;
-    let time = h + "" + minute + "" + second;
-    let filterFileName=time + "-" + fileChild.name
-    filterFileName=filterFileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '')
-    let filePath = props.name + "/" + year + "/" + month + "/" + day + "/" + filterFileName;
-    loading.value=true
+    second = second < 10 ? '0' + second : second;
+    let time = h + '' + minute + '' + second;
+    let filterFileName = time + '-' + fileChild.name;
+    filterFileName = filterFileName.replace(
+      /[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g,
+      '',
+    );
+    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。
@@ -196,35 +223,37 @@
         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))
-          handleHttpUploadOptions.value.onProgress({percent: progress.value});
+          progress.value = parseFloat(parseFloat(p * 100).toFixed(2));
+          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',configData.oss_domain + res.name);
-      emit('changeFileName',fileChild.name)
+      emit('update:imageUrl', configData.oss_domain + res.name);
+      emit('changeFileName', fileChild.name);
     } catch (error) {
-      emit('update:imageUrl','');
-      emit('changeFileName','')
-    }finally {
-      progress.value=0
-      loading.value=false
+      emit('update:imageUrl', '');
+      emit('changeFileName', '');
+    } finally {
+      progress.value = 0;
+      loading.value = false;
     }
-}
+  };
 
+  /**
+   * 执行文件上传
+   */
   const handleHttpUploadOptions = ref({});
-
   const handleHttpUpload = async (options) => {
     handleHttpUploadOptions.value = options;
     if (props.cropper) {
@@ -256,7 +285,7 @@
 
   /**
    * @description 编辑图片
-   * */
+   **/
   const editImg = () => {
     const dom = document.querySelector(`.ant-upload #${uuid.value}`);
     dom && dom.dispatchEvent(new MouseEvent('click'));
diff --git a/src/components/Upload/Images.vue b/src/components/Upload/Images.vue
index f27236a..0bac0de 100644
--- a/src/components/Upload/Images.vue
+++ b/src/components/Upload/Images.vue
@@ -48,11 +48,13 @@
     ZoomInOutlined,
   } from '@ant-design/icons-vue';
   import { notification } from 'ant-design-vue';
-  import OSS from "ali-oss";
+  import OSS from 'ali-oss';
   const uploadRef = ref();
-  import { upload,getOssConfig } from '@/api/common';
+  import { upload, getOssConfig } from '@/api/common';
 
-  // 接受父组件参数
+  /**
+   * 接受父组件参数
+   */
   const props = defineProps({
     zIndex: {
       default: -1,
@@ -107,12 +109,14 @@
     return props.disabled;
   });
   let editIndex = '';
-
   const emit = defineEmits(['upload']);
   const progress = ref(0);
   const loading = ref(false);
 
-  //接口上传
+  /**
+   * 本地接口上传
+   * @param options 参数
+   */
   const handleHttpUpload = async (options) => {
     loading.value = true;
     try {
@@ -160,29 +164,32 @@
     }
   };
 
-   //oss上传
-   const handleHttpUploads = async (options: UploadRequestOptions) => {
-    const configData = await getOssConfig()
+  /**
+   * 阿里云OSS上传
+   * @param options 参数
+   */
+  const handleHttpUploads = async (options: UploadRequestOptions) => {
+    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;
-    let time = h + "" + minute + "" + second;
-    let fileName = time + "-" + options.file.name
-    fileName = fileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '')
-    let filePath = props.name + "/" + year + "/" + month + "/" + day + "/" + fileName;
+    second = second < 10 ? '0' + second : second;
+    let time = h + '' + minute + '' + second;
+    let fileName = time + '-' + options.file.name;
+    fileName = fileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '');
+    let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + fileName;
     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。
@@ -194,13 +201,13 @@
         accessKeySecret: configData.oss_accessKeySecret,
         // 填写Bucket名称。
         bucket: configData.oss_bucketName,
-        timeout: 600000
+        timeout: 600000,
       });
       const res = await client.multipartUpload(filePath, options.file, {
         headers: headers,
         // 获取分片上传进度、断点和返回值。
         progress: (p, cpt, res) => {
-          progress.value = parseFloat(parseFloat(p * 100).toFixed(2))
+          progress.value = parseFloat(parseFloat(p * 100).toFixed(2));
           options.onProgress({ percent: parseFloat(parseFloat(p * 100).toFixed(2)) });
         },
         // 设置并发上传的分片数量。
@@ -208,31 +215,31 @@
         // 设置分片大小。默认值为1 MB，最小值为100 KB。
         partSize: 1024 * 1024,
         // headers,
-        mime: options.file.type
+        mime: options.file.type,
       });
       // 文件地址拼接
       const fileUrl = configData.oss_domain + res.name;
       if (props.multiple) {
-        let list = JSON.parse(JSON.stringify(props.fileList))
+        let list = JSON.parse(JSON.stringify(props.fileList));
         if (editIndex !== '') {
           list.splice(editIndex, 1, {
-            url:fileUrl,
+            url: fileUrl,
             name: options.file.name,
             filePath: fileUrl,
-            fileName: options.file.name
-          })
-          editIndex = ''
+            fileName: options.file.name,
+          });
+          editIndex = '';
         } else {
           list.push({
             url: fileUrl,
             name: options.file.name,
             filePath: fileUrl,
-            fileName: options.file.name
-          })
+            fileName: options.file.name,
+          });
         }
-        emit('upload', list,props.zIndex)
+        emit('upload', list, props.zIndex);
       } else {
-        emit("upload", fileUrl, options.file.name, props.zIndex);
+        emit('upload', fileUrl, options.file.name, props.zIndex);
       }
     } catch (error) {
       notification.error({
@@ -247,19 +254,33 @@
       }
       options.onError(error as any);
     } finally {
-      progress.value = 0
+      progress.value = 0;
       loading.value = false;
     }
-};
+  };
+
+  /**
+   * 执行图片预览
+   * @param index 参数
+   */
   const onPreview = (index: any) => {
     window.open(props.fileList[index].filePath);
   };
 
+  /**
+   * 执行编辑
+   * @param index 参数
+   */
   const handleEdit = (index: any) => {
     editIndex = index;
     const dom = document.querySelector(`.ant-upload #${uuid.value}`);
     dom && dom.dispatchEvent(new MouseEvent('click'));
   };
+
+  /**
+   * 执行删除
+   * @param index 参数
+   */
   const handleRemove = (index: any) => {
     editIndex = index;
     if (props.multiple) {
@@ -274,6 +295,9 @@
     }
   };
 
+  /**
+   * 设置最大允许上传张数
+   */
   const onExceed = () => {
     if (props.limit) {
       notification.warning({
diff --git a/src/components/Upload/file.vue b/src/components/Upload/file.vue
index f0731ba..b076a2d 100644
--- a/src/components/Upload/file.vue
+++ b/src/components/Upload/file.vue
@@ -60,11 +60,13 @@
   import { notification } from 'ant-design-vue';
   import { generateUUID } from '@/utils/auth';
 
-  import OSS from "ali-oss";
+  import OSS from 'ali-oss';
   const uploadRef = ref();
-  import { upload,getOssConfig } from '@/api/common';
+  import { upload, getOssConfig } from '@/api/common';
 
-  // 接受父组件参数
+  /**
+   * 接受父组件参数
+   */
   const props = defineProps({
     zIndex: {
       default: -1,
@@ -119,7 +121,6 @@
 
   // 生成组件唯一id
   const uuid = ref('id-' + generateUUID());
-
   const getCSSProperties = computed(() => {
     return {
       width: `${props.width}px`,
@@ -133,7 +134,11 @@
   const emit = defineEmits(['upload']);
 
   const loading = ref(false);
-  //接口上传
+
+  /**
+   * 本地接口上传
+   * @param options 参数
+   */
   const handleHttpUpload = async (options) => {
     if (!props.autoUpload) {
       emit('upload', options);
@@ -172,31 +177,36 @@
       loading.value = false;
     }
   };
-  //oss上传
+
+  /**
+   * 阿里云OSS上传
+   * @param options 参数
+   */
   const handleHttpUploads = async (options: UploadRequestOptions) => {
     if (!props.autoUpload) {
       emit('upload', options);
       return;
     }
-    const configData = await getOssConfig()
+    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;
-    let time = h + "" + minute + "" + second;
-    let name = props.name + "/"+ year + "/" + month + "/" + day + "/" + time + "-" + options.file.name;
+    second = second < 10 ? '0' + second : second;
+    let time = h + '' + minute + '' + second;
+    let name =
+      props.name + '/' + year + '/' + month + '/' + day + '/' + time + '-' + options.file.name;
     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。
@@ -208,32 +218,32 @@
         accessKeySecret: configData.oss_accessKeySecret,
         // 填写Bucket名称。
         bucket: configData.oss_bucketName,
-        timeout: 600000
+        timeout: 600000,
       });
       const res = await client.multipartUpload(name, options.file, {
         headers: headers,
         // 获取分片上传进度、断点和返回值。
         progress: (p, cpt, res) => {
-          options.onProgress({percent: parseFloat(parseFloat(p * 100).toFixed(2))});
+          options.onProgress({ percent: parseFloat(parseFloat(p * 100).toFixed(2)) });
         },
         // 设置并发上传的分片数量。
         parallel: 4,
         // 设置分片大小。默认值为1 MB，最小值为100 KB。
         partSize: 1024 * 1024,
         // headers,
-        mime: options.file.type
+        mime: options.file.type,
       });
-      if(props.multiple){
+      if (props.multiple) {
         let list = JSON.parse(JSON.stringify(props.fileList));
-          list.push({
-            url: configData.oss_domain + res.name,
-            name: options.file.name,
-            filePath: configData.oss_domain + res.name,
-            fileName: options.file.name,
-          });
-          emit('upload', list, props.zIndex);
-      }else{
-        emit("upload", configData.oss_domain + res.name,options.file.name, props.zIndex);
+        list.push({
+          url: configData.oss_domain + res.name,
+          name: options.file.name,
+          filePath: configData.oss_domain + res.name,
+          fileName: options.file.name,
+        });
+        emit('upload', list, props.zIndex);
+      } else {
+        emit('upload', configData.oss_domain + res.name, options.file.name, props.zIndex);
       }
     } catch (error) {
       notification.error({
@@ -251,11 +261,18 @@
     }
   };
 
-
+  /**
+   * 执行游览
+   * @param uploadFile 文件
+   */
   const onPreview = (uploadFile) => {
     window.open(uploadFile?.url);
   };
 
+  /**
+   * 执行删除
+   * @param file 文件参数
+   */
   const handleRemove = (file: any) => {
     if (props.multiple) {
       emit(
diff --git a/src/views/content/article/edit.vue b/src/views/content/article/edit.vue
index 1ff7e5a..703b9df 100644
--- a/src/views/content/article/edit.vue
+++ b/src/views/content/article/edit.vue
@@ -53,7 +53,8 @@
             @change-file-name="(name) => (formData.coverImgName = name)"
             :fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
             name="article"
-            :fileSize="200"
+            :fileSize="20"
+            :limit="5"
             v-model:image-url="formData.cover"
           >
             <template #tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>