上传进度条

src/views/system/version/index.vue

@@ -101,10 +101,22 @@
         </el-form-item>
 
         <el-form-item v-if="linkType==2">
-          <el-upload action="#" :http-request="requestUpload" :show-file-list="true" :before-upload="beforeUpload">
+          <el-upload 
+          ref="upload"
+          :limit="1"
+          :headers="upload.headers" 
+          :action="upload.url" 
+          :data="upload.data"
+          :disabled="upload.isUploading"
+          :show-file-list="true" 
+          :on-change="handleFileChange"
+          :on-progress="uploadProcess"
+          :on-success="handleFileSuccess"
+          >
             <el-button size="small">{{ $t('上传') }}<i class="el-icon-upload el-icon--right"></i>
             </el-button>
           </el-upload>
+         
         </el-form-item>
 
         <el-form-item :label="$t('版本链接')" prop="appUrl">
@@ -132,6 +144,7 @@
 import { createVersion, updateVersion, deleteVersion, getVersion, getVersionPage, exportVersionExcel } from "@/api/system/version";
 import { getDictDatas, DICT_TYPE } from '@/utils/dict';
 import { uploadFile } from "@/api/infra/file";
+import {getToken} from "@/utils/auth";
 export default {
   name: "Version",
   components: {
@@ -181,7 +194,17 @@ export default {
         versionCode: [{ required: true, message: this.$t("内部号不能为空"), trigger: "blur" }],
         appUrl: [{ required: true, message: this.$t("版本链接不能为空"), trigger: "blur" }],
         forceUpdate: [{ required: true, message: this.$t("强制更新不能为空"), trigger: "change" }],
-      }
+      },
+
+      // 用户导入参数
+      upload: {
+        open: false, // 是否显示弹出层
+        title: "", // 弹出层标题
+        isUploading: false, // 是否禁用上传
+        url: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
+        headers: { Authorization: "Bearer " + getToken() }, // 设置上传的请求头部
+        data: {} // 上传的额外数据，用于文件名
+      },
     };
   },
 
@@ -299,8 +322,29 @@ export default {
         }).catch(() => {});
     },
 
+    /** 处理上传的文件发生变化 */
+    handleFileChange(file, fileList) {
+      this.upload.data.path = this.uuid() + "/" + file.name;
+    },
+
+    /** 文件上传成功处理 */
+    handleFileSuccess(response, file, fileList) {
+      // 清理
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      // 提示成功，并刷新
+      this.$modal.msgSuccess("上传成功");
+      this.$set(this.form, 'appUrl', response.data);
+    },
+
+    uploadProcess(event, file, fileList) {
+      this.upload.isUploading = true; // 禁止修改
+    },
+
     // 覆盖默认的上传行为
-    requestUpload() {
+    requestUpload(params) {
+
     },
     // 上传预处理
     beforeUpload(file) {