新增文件上传进度条 传参参数修改

src/components/Upload/index.vue

@@ -1,9 +1,18 @@
 <template>
   <div>
-    <el-upload ref="upload" v-if="type === 'file' ? true : hideUpload" :action="action" :headers="headers"
-      :data="data" :show-file-list="false" :list-type="type === 'file' ? '':'picture-card'"
-      :before-upload="beforeUpload" :on-success="onSuccess" :http-request="httpRequest">
-      <el-button v-if="type === 'file'" type="primary" style="margin:0">上传文件</el-button>
+    <el-upload :disabled="disabledUpload"
+      ref="upload"
+      v-if="type === 'file' ? true : hideUpload"
+      :action="action"
+      :headers="headers"
+      :data="data"
+      :show-file-list="false"
+      :list-type="type === 'file' ? '':'picture-card'"
+      :before-upload="beforeUpload"
+      :on-success="onSuccess"
+      :on-progress="onProgress"
+    >
+      <el-button v-if="type === 'file'" type="primary" style="margin:0">{{ title }}</el-button>
       <i v-else slot="default" class="el-icon-plus" />
     </el-upload>
     <div class="upload-img" v-if="type === 'file' ? false : hideUpload === false">
@@ -16,91 +25,106 @@
 </template>
 
 <script>
-import { client } from '@/api/oss'
+// import { client } from '@/api/oss'
 import { getToken } from "@/utils/auth";
 export default {
   props: {
     type: {
       type: String,
-      default: 'image'
+      default: "image",
     },
     // 图片
     url: {
       type: String,
-      default: ''
+      default: "",
     },
     // 隐藏删除按钮
     disabled: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       // 额外参数
       data: {
-        multipartFile: new FormData()
+        multipartFile: new FormData(),
       },
+      // 文件大小
+      size: 0,
       // 请求头
       headers: {
-        Authorization: "Bearer " + getToken()
+        Authorization: "Bearer " + getToken(),
       },
       // 上传地址
-      action: '',
+      action: "",
       // 隐藏上传按钮
       hideUpload: true,
+      // 禁用上传按钮
+      disabledUpload: false,
+      // 按钮标题
+      title: '上传文件',
       // 图片
-      newUrl: ''
-    }
+      newUrl: "",
+    };
   },
   watch: {
     url(val) {
       if (val) {
-        this.newUrl = val
-        this.hideUpload = false
+        this.newUrl = val;
+        this.hideUpload = false;
       }
-    }
+    },
   },
   mounted() {
     if (this.url) {
-      this.newUrl = this.url
-      this.hideUpload = false
+      this.newUrl = this.url;
+      this.hideUpload = false;
     }
 
-    this.action = this.type === 'image' ?
-      `${process.env.VUE_APP_BASE_API}/system/file/picture/upload` :
-      `${process.env.VUE_APP_BASE_API}/system/file/file/upload`
+    this.action =
+      this.type === "image"
+        ? `${process.env.VUE_APP_BASE_API}/system/file/picture/upload`
+        : `${process.env.VUE_APP_BASE_API}/system/file/file/upload`;
   },
   methods: {
     // 上传服务器之前提交文件
     beforeUpload(file) {
-      this.data.multipartFile = file
+      this.data.multipartFile = file;
+      this.size = file.size
+      this.disabledUpload = true
     },
 
     // 上传成功
     onSuccess(file) {
-      this.hideUpload = false
-      this.$emit('success', this.newUrl = file.data)
+      this.hideUpload = false;
+      this.disabledUpload = false
+      this.newUrl = file.data
+      this.title = '上传成功'
+      this.$emit("success", {
+        file: this.newUrl,
+        size: this.size
+      });
+    },
+
+    // 上传时 进度条
+    onProgress(file){
+      this.title = `${parseInt(file.percent - 1)}%`
     },
 
     // 删除
     handleRemove() {
-      this.hideUpload = true
-      this.$emit('delete', this.newUrl = '')
+      this.hideUpload = true;
+      this.$emit("delete", (this.newUrl = ""));
     },
 
-    async httpRequest(e) {
-      try {
-        let file = e.file
-        let fileName = file.name
-        const res = client.put(fileName, file)
-        console.log(res);
-      } catch(err) {
-        console.log(err);
-      }
-    }
-  }
-}
+    // httpRequest(e) {
+    //   client.put(e.file.name, e.file).then(res => {
+    //     console.log(res);
+    //   })
+    // },
+  },
+};
 </script>
 
 <style lang="scss" scoped>