上传进度显示

src/api/newApi/file.js

@@ -1,8 +1,30 @@
 import axios from "@/utils/axios";
+import {showModal} from '@/utils/model/progress/index'
 // 新系统文件新接口
 export default {
-  uploadFile(data){
-    return axios.post('/fileManager/uploadNormalFile', data)
+  uploadFile(data,uploadProgress){
+    let ProgressModalControl = null
+    return axios.post('/fileManager/uploadNormalFile', data,{
+      onUploadProgress: progressEvent => { 
+        if (progressEvent.total) {  
+          const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);  
+          if (typeof uploadProgress === 'function') {  
+            uploadProgress(percent);  
+          }else{
+            if(percent == 0){
+              ProgressModalControl = showModal()
+            }
+            if(ProgressModalControl){
+              ProgressModalControl.update(percent)
+              if(percent == 100){
+                ProgressModalControl.hide()
+              }
+            }
+            
+          }
+        }  
+      } 
+    })
   },
   downLoadFile(params, prop = {}) {
     return axios.get('/fileManager/downloadFile', {params},prop)

src/utils/model/progress/index.js

@@ -0,0 +1,31 @@
+import Vue from "vue";
+import ProgressModal from "./index.vue";
+
+// 创建弹窗的构造函数
+const ProgressModalConstructor = Vue.extend(ProgressModal);
+
+// 实例化弹窗
+let modalInstance = null;
+
+/**
+ * 打开弹窗
+ * @param {Object} options - 弹窗配置
+ */
+export function showModal(options = {}) {
+  // 创建实例
+  modalInstance = new ProgressModalConstructor({
+    propsData: {
+      fileName: options.fileName || ""
+    },
+  });
+ 
+  // 手动挂载到 DOM
+  modalInstance.$mount();
+  document.body.appendChild(modalInstance.$el);
+ 
+  // 显示弹窗
+  modalInstance.show();
+ 
+  // 返回实例，以便外部手动关闭
+  return modalInstance;
+}

src/utils/model/progress/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="myProgress_model" v-if="visible">
+    <div class="myProgress_model_content">
+      <el-progress type="circle" :percentage="percentage" text-color="#ffffff" :format="format()"></el-progress>  
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    fileName:{
+        type:String,
+        default:''
+    }
+  },
+  data() {
+    return {
+        percentage:0,
+        visible:false,
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    format(){
+        return ()=>{return "文件上传中... "+ this.percentage + '%'}
+    },
+    show(){
+        this.visible = true
+    },
+    update(percent){
+        this.percentage = percent
+    },
+    hide(){
+        this.visible = false
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.myProgress_model {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,0.5);
+  .myProgress_model_content{
+    width: 150px;
+    height: 150px;
+    border-radius: 150px;
+    // background: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>
+<style lang="scss">
+    .myProgress_model{
+        .myProgress_model_content{
+            .el-progress__text{
+                color: white !important;
+            }
+        }
+    }
+</style>

src/utils/model/upload/index.vue

@@ -44,7 +44,16 @@
                 }}</span>
               </div>
             </myTooltip>
-            <div class="type" v-if="autoUpload">{{ item.guid ? "已上传" : "待上传" }}</div>
+            <div class="type" v-if="autoUpload">
+              <div v-if="item.guid">
+                {{ item.guid ? "已上传" : "待上传" }}
+              </div>
+              <div v-else>
+                上传中... {{ percent }}%
+              </div>
+              
+              
+            </div>
             <div class="icon" @click="onRemove(item, fileList)">
               <i class="el-icon-close"></i>
             </div>
@@ -183,7 +192,8 @@ export default {
       exist2:[],
       showExist:false,
       dialogVisible:false,
-      show : false
+      show : false,
+      percent:''
     };
   },
   watch: {},
@@ -279,7 +289,10 @@ export default {
       let formData = new FormData()
       formData.append('sourceId',this.$constants.sourceId)
       formData.append('files',file.raw)
-      this.$api.uploadFile(formData).then(response=>{
+      this.percent = 0
+      this.$api.uploadFile(formData,(percent)=>{
+        this.percent = percent
+      }).then(response=>{
         if(response.code == 200){
           file.guid = response.data[0]
           file.raw.guid = response.data[0]