feat: OSS上传

src/api/file.js

@@ -1,23 +1,23 @@
 import request from '@/utils/request';
 // OSS签名
 export function sign(serviceName, configId) {
-    // return request({
-    //     url: '/oss/oss/generateOssSignature',
-    //     method: 'POST',
-    //     data: {
-    //         serviceName,
-    //         configId,
-    //     },
-    // });
-    console.info(serviceName, configId);
-    return {
-        accessId: 'LTAI4GHRNb5Xn2w5NeHVbR4c',
-        policy: 'eyJleHBpcmF0aW9uIjoiMjAyMi0wNC0xNVQyMDowODoyNi4zMTlaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCJ0ZXN0LyJdXX0=',
-        signature: 'okaB3sNp3vzyfM0S3ypudaUAZ+0=',
-        dir: 'test/',
-        host: 'https://msb-edu-dev.oss-cn-beijing.aliyuncs.com',
-        expire: '1650053306',
-    };
+    return request({
+        url: '/oss/oss/generateOssSignature',
+        method: 'POST',
+        data: {
+            serviceName,
+            configId,
+        },
+    });
+    // console.info(serviceName, configId);
+    // return {
+    //     accessId: 'LTAI4GHRNb5Xn2w5NeHVbR4c',
+    //     policy: 'eyJleHBpcmF0aW9uIjoiMjAyMi0wNC0xNVQyMDowODoyNi4zMTlaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCJ0ZXN0LyJdXX0=',
+    //     signature: 'okaB3sNp3vzyfM0S3ypudaUAZ+0=',
+    //     dir: 'test/',
+    //     host: 'https://msb-edu-dev.oss-cn-beijing.aliyuncs.com',
+    //     expire: '1650053306',
+    // };
 }
 // 上传文件
 export async function upload(serviceName, configId, file) {
@@ -34,5 +34,8 @@ export async function upload(serviceName, configId, file) {
         url: oss.host,
         method: 'POST',
         data,
+        headers: {
+            oss: true,
+        },
     });
 }

src/components/ElUploadImage.vue

@@ -68,19 +68,18 @@
     watch(
         () => attrs.modelValue,
         (value) => {
+            value = value instanceof Array ? value : [value];
             if (
                 unref(imgList)
                     .map((item) => item.url)
                     .join(',') !== value?.join(',')
             ) {
-                imgList.value = (value instanceof Array ? value : [value])
+                imgList.value = value
                     .filter((item) => item)
                     .map((item) => {
                         return {
                             name: item,
-                            response: {
-                                data: item,
-                            },
+                            response: item,
                             url: item,
                         };
                     });
@@ -91,7 +90,7 @@
     watch(
         () => imgList,
         () => {
-            const arr = unref(imgList).map((item) => item.response?.data);
+            const arr = unref(imgList).map((item) => item.response);
             if (arr.every((item) => !!item)) {
                 const value = props.limit === 1 ? arr[0] : arr;
                 emits('update:modelValue', value);
@@ -123,8 +122,8 @@
         }
         return res;
     };
-    const handleUpload = ({ file }) => {
-        return upload(props.serviceName, props.configId, file);
+    const handleUpload = async ({ file }) => {
+        return await upload(props.serviceName, props.configId, file);
     };
     const fmtSize = computed(() => {
         const units = ['byte', 'KB', 'MB', 'GB', 'TB'];

src/utils/request.js

@@ -3,12 +3,11 @@ import { ElMessage } from '@/plugins/element-plus';
 import store from '@/store';
 import qs from 'qs';
 
-const handleResponse = async ({ config: requestConfig, headers, data, status }) => {
-    if (
-        ['application/octet-stream', 'application/zip'].indexOf(headers['content-type']) !== -1 ||
-        requestConfig['down'] === 'file'
-    ) {
-        return data;
+const handleResponse = async ({ config: requestConfig, data, status }) => {
+    if (requestConfig.headers.oss === true) {
+        return `${requestConfig.url}/${requestConfig.data
+            .get('key')
+            .replace('${filename}', requestConfig.data.get('name'))}`;
     }
     let code = data.code || status;
     console.info('[api]', code, requestConfig.method, requestConfig.url, data.data);

src/views/sales/category/form.vue

@@ -56,7 +56,7 @@
     });
     const rules = reactive({
         name: [{ required: true, message: '分类名称不能为空' }],
-        // picture: [{ required: true, message: '分类图片不能为空' }],
+        picture: [{ required: true, message: '分类图片不能为空' }],
         isEnable: [{ required: true, message: '是否显示不能为空' }],
     });
     const list = computed(() => store.state.category.list);