头像裁剪 oss

src/components/Cropper/src/CropperModal.vue

@@ -160,6 +160,8 @@
   import CropperImage from './CropperImage.vue';
   import { dataURLtoBlob, base64ToFile } from '@/utils/file/base64Conver';
   import { isFunction } from '@/utils/is';
+  import { getOssConfig } from '@/api/common';
+  import OSS from 'ali-oss';
   import {
     UploadOutlined,
     ReloadOutlined,
@@ -237,8 +239,9 @@
     }
     const uploadApi = props.uploadApi;
     const name = props.name
-    if (uploadApi && isFunction(uploadApi)) {
     const file = base64ToFile(previewSource.value, filename);
+    //接口上传
+    if (uploadApi && isFunction(uploadApi)) {
       try {
         setSubLoading(true);
         const formData = new FormData();
@@ -250,8 +253,70 @@
       } 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 = '';