头像裁剪 oss

.env.development

@@ -15,7 +15,8 @@ VITE_DROP_CONSOLE = true
 
 # 跨域代理，可以配置多个，请注意不要换行
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
-VITE_PROXY=[["/api","http://192.168.124.203:8081/api"]]
+# VITE_PROXY=[["/api","http://192.168.124.203:8081/api"]]
+VITE_PROXY=[["/api","http://192.168.124.60:8081/api"]]
 
 # API 接口地址
 VITE_GLOB_API_URL =

src/components/Cropper/src/CropperModal.vue

@@ -1,5 +1,11 @@
 <template>
-  <basicModal ref="modalRef" class="cropperModal" @register="modalRegister" @on-ok="handleOk" @on-close="handleClose">
+  <basicModal
+    ref="modalRef"
+    class="cropperModal"
+    @register="modalRegister"
+    @on-ok="handleOk"
+    @on-close="handleClose"
+  >
     <template #default>
       <div class="cropper-box">
         <div class="cropper-box-left">
@@ -184,8 +190,10 @@
   import { useMessage } from 'naive-ui';
   import { basicModal, useModal } from '@/components/Modal';
   import CropperImage from './CropperImage.vue';
-  import { dataURLtoBlob,base64ToFile } from '@/utils/file/base64Conver';
+  import { dataURLtoBlob, base64ToFile } from '@/utils/file/base64Conver';
   import { isFunction } from '@/utils/is';
+  import OSS from 'ali-oss';
+  import { getOssConfig } from '@/api/common';
   import {
     UploadOutlined,
     ReloadOutlined,
@@ -262,24 +270,85 @@
       return message.error('请先上传图片');
     }
     const uploadApi = props.uploadApi;
-    const name = props.name
+    const name = props.name;
+    const file = base64ToFile(previewSource.value, filename);
+    //接口上穿
     if (uploadApi && isFunction(uploadApi)) {
-      const file = base64ToFile(previewSource.value, filename);
-      console.log(file)
       try {
         setSubLoading(true);
         const formData = new window.FormData();
         formData.append('file', file);
         formData.append('name', name);
-        console.log(formData)
         const result = await uploadApi(formData);
         emit('uploadSuccess', result);
         closeModal();
       } finally {
         setSubLoading(false);
       }
+    } else {
+      //oss上传
+      actionFiles(file);
     }
   }
+  /**
+   * 阿里云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;
+    let day: string | number = date.getDate();
+    day = day < 10 ? '0' + day : day;
+    let h: string | number = date.getHours();
+    h = h < 10 ? '0' + h : h;
+    let minute: string | number = date.getMinutes();
+    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;
+    setSubLoading(true);
+    try {
+      const headers = {
+        'Access-Control-Allow-Origin': '*',
+      };
+      const client = new OSS({
+        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
+        endpoint: configData.oss_endpoint,
+        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
+        secure: true,
+        region: configData.oss_region,
+        accessKeyId: configData.oss_accessKeyId,
+        accessKeySecret: configData.oss_accessKeySecret,
+        // 填写Bucket名称。
+        bucket: configData.oss_bucketName,
+        timeout: 600000,
+      });
+      const res = await client.multipartUpload(filePath, fileChild, {
+        headers: headers,
+        // 设置并发上传的分片数量。
+        parallel: 4,
+        // 设置分片大小。默认值为1 MB，最小值为100 KB。
+        partSize: 1024 * 1024,
+        // headers,
+        mime: fileChild.type,
+      });
+      emit('uploadSuccess', { fileUrl: configData.oss_domain + res.name });
+      closeModal();
+    } catch (error) {
+      emit('uploadSuccess', {});
+    } finally {
+      setSubLoading(false);
+    }
+  };
   function handleClose() {
     src.value = '';
     previewSource.value = '';