61 优化上传照片交互（进度条或者文字提示上传中、上传完成）

.env.development

@@ -2,8 +2,8 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://127.0.0.1:18080'
-# VUE_APP_BASE_API = 'https://430jy.uutime.cn/'
+# VUE_APP_BASE_API = 'http://127.0.0.1:18080'
+VUE_APP_BASE_API = 'https://430jy.uutime.cn/'
 VUE_APP_API_TIMEOUT = 30000
 
 

src/components/Upload.vue

@@ -12,6 +12,7 @@
       :on-success="handleAvatarSuccess"
       :on-error="handleError"
       :on-progress="onProgress"
+      :before-upload="handleBeforeUpload"
       :disabled="limit <= value.length"
     >
       <i slot="default" class="el-icon-plus" />
@@ -86,7 +87,9 @@ export default {
         token: getToken()
       },
       imgList: this.value,
-      tmp: []
+      tmp: [],
+
+      loading: null
     };
   },
 
@@ -125,6 +128,7 @@ export default {
     handleError() {
       this.mark = false;
       this.$error('上传失败，请稍后重试...');
+      this.loading.close();
     },
     handleAvatarSuccess(res, file, fileList) {
       if (file.response.code !== 200) {
@@ -143,7 +147,9 @@ export default {
           : [];
       this.$nextTick(() => {
         this.$emit('input', result);
+        this.$message.success('上传成功');
         this.mark = false;
+        this.loading.close();
       });
     },
     // handleChange(file, fileList) {
@@ -168,6 +174,14 @@ export default {
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
+    },
+    handleBeforeUpload() {
+      this.loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
     }
   }
 };