fix bug

src/components/uploads.vue

@@ -1,26 +1,25 @@
 <template>
   <div>
     <el-upload
-        ref="upload"
-        :accept="accept"
-        :action="action"
-        :data="data"
-        :auto-upload="auto"
-        :drag="drag"
-        :file-list="tmpFileList"
-        :headers="headers"
-        :limit="max"
-        :list-type="listType"
-        :multiple="max > 1"
-        :on-change="handleChange"
-        :on-exceed="maxChange"
-        :on-progress="progress"
-        :on-remove="remove"
-        :on-error="onError"
-        :on-success="success"
-        :before-upload="beforeUp"
-        :show-file-list="showList"
-        style="width: 100%"
+      ref="upload"
+      :accept="accept"
+      :action="action"
+      :data="data"
+      :auto-upload="auto"
+      :drag="drag"
+      :file-list="tmpFileList"
+      :headers="headers"
+      :limit="max"
+      :list-type="listType"
+      :multiple="max > 1"
+      :on-change="handleChange"
+      :on-exceed="maxChange"
+      :on-progress="progress"
+      :on-remove="remove"
+      :on-error="onError"
+      :on-success="success"
+      :show-file-list="showList"
+      style="width: 100%"
     >
       <div v-if="drag">
         <i class="el-icon-upload"></i>
@@ -30,13 +29,13 @@
       </div>
       <div v-else class="flex flex-justify-start">
         <el-button
-            v-if="showBtn"
-            :loading="loading"
-            icon="el-icon-upload"
-            plain
-            size="mini"
-            type="primary"
-        >{{ btnText }}
+          v-if="showBtn"
+          :loading="loading"
+          icon="el-icon-upload"
+          plain
+          size="mini"
+          type="primary"
+          >{{ btn }}
         </el-button>
       </div>
       <slot></slot>
@@ -45,8 +44,8 @@
 </template>
 
 <script>
-import {Base64} from 'js-base64'
-import {getToken} from '../utils/auth.js'
+import { Base64 } from 'js-base64'
+import { getToken } from '../utils/auth.js'
 import website from '@/config/website'
 import api from '@/api'
 
@@ -66,10 +65,6 @@ export default {
       default: false
     },
     data: Object,
-    loading: {
-      type: Boolean,
-      default: false
-    },
     auto: {
       type: Boolean,
       default: false
@@ -101,13 +96,23 @@ export default {
       }
     }
   },
+  watch: {
+    btnText: {
+      handler(val) {
+        this.btn = val
+      },
+      immediate: true
+    }
+  },
   data() {
     return {
+      loading: false,
+      btn: '点击上传',
       tmpFileList: [],
       fileList: [],
       headers: {
         Authorization: `Basic ${Base64.encode(
-            `${website.clientId}:${website.clientSecret}`
+          `${website.clientId}:${website.clientSecret}`
         )}`,
         'Blade-Auth': 'bearer ' + getToken()
       }
@@ -135,15 +140,12 @@ export default {
       this.fileList = files
     },
     progress(event, file, fileList) {
-      // this.$message.info('上传中')
-      console.log(file.percentage)
-      if (file.percentage === 100) {
-        console.log(file)
-      }
-      if (file.status === 'uploading') {
-        // this.loading = true
+      if (file.status === 'ready') {
+        this.loading = true
+        this.btn = '正在上传'
       } else if (file.status === 'success') {
         this.loading = false
+        this.btn = '点击上传'
       }
 
       this.$emit('progress')
@@ -166,8 +168,10 @@ export default {
       this.$emit('before', file)
     },
     success() {
+      this.loading = false
+      this.btn = '点击上传'
       const finishList = this.tmpFileList.filter(
-          sub => sub.status === 'success'
+        sub => sub.status === 'success'
       )
       if (finishList.length === this.tmpFileList.length) {
         this.$emit('success', {