perf: 文件上传优化

src/api/file.js

@@ -20,7 +20,7 @@ export function sign(serviceName, configId) {
     // };
 }
 // 上传文件
-export async function upload(serviceName, configId, file) {
+export async function upload(serviceName, configId, file, cancelToken) {
     let oss = await sign(serviceName, configId);
     let data = new FormData();
     data.append('name', file.name);
@@ -37,5 +37,7 @@ export async function upload(serviceName, configId, file) {
         headers: {
             oss: true,
         },
+        timeout: 0,
+        cancelToken,
     });
 }

src/components/ElUploadFile.vue

@@ -9,6 +9,7 @@
             :http-request="handleUpload"
             list-type="text"
             :on-exceed="handleExceed"
+            :on-remove="handleRemove"
             show-file-list
         >
             <el-button type="primary">
@@ -56,8 +57,12 @@
             type: String,
             default: '*/*',
         },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
     });
-    const emits = defineEmits(['update:modelValue']);
+    const emits = defineEmits(['update:modelValue', 'update:loading']);
     const imgList = ref([]);
     const attrs = useAttrs();
     watch(
@@ -97,6 +102,12 @@
         console.info('[upload] exceed', list);
         ElMessage.error('超出最大上传数量');
     };
+    const handleRemove = (file) => {
+        console.info('[upload] remove', file);
+        if (file.status !== 'success') {
+            unref(cancelToken).cancel('用户手动取消请求');
+        }
+    };
     const handleBeforeUpload = (file) => {
         console.info('[upload] upload', file);
         let res = true;
@@ -106,8 +117,17 @@
         }
         return res;
     };
+    const cancelToken = ref(null);
+    const loading = ref(props.loading);
+    watch(loading, (value) => {
+        emits('update:loading', value);
+    });
     const handleUpload = async ({ file }) => {
-        return await upload(props.serviceName, props.configId, file);
+        loading.value = true;
+        cancelToken.value = axios.CancelToken.source();
+        let res = await upload(props.serviceName, props.configId, file, unref(cancelToken).token);
+        loading.value = false;
+        return res;
     };
     const fmtSize = computed(() => {
         const units = ['byte', 'KB', 'MB', 'GB', 'TB'];

src/utils/request.js

@@ -76,7 +76,7 @@ instance.interceptors.response.use(
     (error) => {
         let res = null;
         if (!error.response) {
-            ElMessage.error('服务器无响应');
+            ElMessage.error(error.message || '请求失败');
         } else {
             res = handleResponse(error.response);
         }

src/views/sales/product/form/step1.vue

@@ -39,6 +39,7 @@
                 <el-form-item v-if="form.productType === 2" label="自动发货内容" prop="virtualProductModifyDTOList">
                     <el-upload-file
                         v-model="form.fileList"
+                        v-model:loading="uploading"
                         config-id="product"
                         :limit="5"
                         multiple
@@ -59,7 +60,9 @@
             </el-form>
         </el-scrollbar>
         <div class="step-footer">
-            <el-button type="primary" @click="handleSave">下一步、填写商品属性</el-button>
+            <el-button :loading="loading || uploading" type="primary" @click="handleSave">
+                {{ uploading ? '文件上传中' : '下一步、填写商品属性' }}
+            </el-button>
         </div>
     </div>
 </template>
@@ -75,6 +78,7 @@
 
             const state = reactive({
                 loading: false,
+                uploading: false,
                 refsForm: null,
                 currentTab: 'APP',
                 form: {