feat: 上传文件新增遮罩弹窗

src/utils/request.js

@@ -18,7 +18,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: import.meta.env.VITE_APP_BASE_API,
   // 超时
-  timeout: 1000000
+  timeout: 30 * 60 * 1000
 })
 
 // request拦截器

src/views/voice/upload/index.vue

@@ -1,13 +1,15 @@
 <script setup>
+import { ElLoading } from 'element-plus';
 import { getToken } from "@/utils/auth";
 import { fileApi } from '@/api/voice/file';
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 
 const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/excel/updateUserInfoFromExcel "); // 上传文件服务器地址
 const { proxy } = getCurrentInstance();
 const headers = ref({ Authorization: "Bearer " + getToken() });
 const fileList = ref([]);
 const fileInfoList = ref([]);
+const loading = ref(null);
 
 const tableData = [
   {
@@ -36,10 +38,23 @@ const init = () => {
   })
 }
 
+function handleError () {
+  loading.value?.close();
+}
+
+function handleBeforeUpload () {
+  loading.value = ElLoading.service({
+    lock: true,
+    text: '文件处理中，请耐心等待...',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+}
+
 // 上传成功回调
 function handleUploadSuccess(res) {
+  loading.value?.close();
   if (res.code === 200) {
-    proxy.$modal.msgSuccess("文件上传成功");
+    proxy.$modal.msgSuccess("处理完成");
     fileList.value = [];
     init();
   }
@@ -71,7 +86,7 @@ onMounted(() => {
 
         <div class="flex justify-center pt-[20px]">
           <el-upload accept=".xlsx" :limit="1" :action="uploadFileUrl" :file-list="fileList"
-            :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers" ref="fileUpload">
+            :on-success="handleUploadSuccess" :on-error="handleError" :before-upload="handleBeforeUpload" :show-file-list="false" :headers="headers" ref="fileUpload">
             <el-button type="primary" class="w-[200px]" size="large">上传文件</el-button>
           </el-upload>
         </div>