feat(Uploader): support uploading status (#5625)

src/style/var.less

@@ -785,8 +785,10 @@
 @uploader-mask-icon-size: 22px;
 @uploader-mask-message-font-size: @font-size-sm;
 @uploader-mask-message-line-height: 14px;
+@uploader-loading-icon-size: 22px;
+@uploader-loading-icon-color: @white;
 
 // Sku
 @sku-item-background-color: @background-color;
-@sku-icon-gray-color: #dcdde0;
+@sku-icon-gray-color: @gray-4;
 @sku-upload-mask-color: rgba(50, 50, 51, 0.8);

src/uploader/README.md

@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-### Failed
+### Upload Status
 
 ```html
 <van-uploader v-model="fileList" :after-read="afterRead" />
@@ -55,13 +55,29 @@ export default {
 export default {
   data() {
     return {
-      fileList: []
+      fileList: [
+        {
+          url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+          status: 'uploading',
+          message: 'Uploading...'
+        },
+        {
+          url: 'https://img.yzcdn.cn/vant/tree.jpg',
+          status: 'failed',
+          message: 'Failed'
+        }
+      ]
     }
   },
   methods: {
     afterRead(file) {
-      file.status = 'failed';
-      file.message = 'Failed';
+      file.status = 'uploading';
+      file.message = 'Uploading...';
+
+      setTimeout(() => {
+        file.status = 'failed';
+        file.message = 'Failed';
+      }, 1000);
     }
   }
 };

src/uploader/README.zh-CN.md

@@ -53,9 +53,9 @@ export default {
 };
 ```
 
-### 上传失败
+### 上传状态
 
-将 file 的`status`设置为`failed`表示文件上传失败
+通过`status`属性可以标识上传状态，`uploading`表示上传中，`failed`表示上传失败，`done`表示上传完成（从 2.4.7 版本开始支持）
 
 ```html
 <van-uploader v-model="fileList" :after-read="afterRead" />
@@ -65,13 +65,29 @@ export default {
 export default {
   data() {
     return {
-      fileList: []
+      fileList: [
+        {
+          url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+          status: 'uploading',
+          message: '上传中...'
+        },
+        {
+          url: 'https://img.yzcdn.cn/vant/tree.jpg',
+          status: 'failed',
+          message: '上传失败'
+        }
+      ]
     }
   },
   methods: {
     afterRead(file) {
-      file.status = 'failed';
-      file.message = '上传失败';
+      file.status = 'uploading';
+      file.message = '上传中...';
+
+      setTimeout(() => {
+        file.status = 'failed';
+        file.message = '上传失败';
+      }, 1000);
     }
   }
 };

src/uploader/demo/index.vue

@@ -8,8 +8,8 @@
       <van-uploader v-model="fileList" multiple accept="*" />
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('failed')">
-      <van-uploader v-model="failedFileList" :after-read="afterReadFailed" />
+    <demo-block v-if="!isWeapp" :title="$t('status')">
+      <van-uploader v-model="statusFileList" :after-read="afterReadFailed" />
     </demo-block>
 
     <demo-block :title="$t('maxCount')">
@@ -34,19 +34,23 @@
 export default {
   i18n: {
     'zh-CN': {
+      status: '上传状态',
       failed: '上传失败',
       upload: '上传文件',
       preview: '文件预览',
       maxCount: '限制上传数量',
+      uploading: '上传中...',
       beforeRead: '上传前校验',
       uploadStyle: '自定义上传样式',
       invalidType: '请上传 jpg 格式图片',
     },
     'en-US': {
+      status: 'Upload Status',
       failed: 'Failed',
       upload: 'Upload File',
       preview: 'Preview File',
       maxCount: 'Max Count',
+      uploading: 'Uploading...',
       beforeRead: 'Before Read',
       uploadStyle: 'Upload Style',
       invalidType: 'Please upload an image in jpg format',
@@ -61,16 +65,23 @@ export default {
       ],
       fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
       fileList3: [],
-      failedFileList: [],
+      statusFileList: [],
     };
   },
 
   created() {
-    this.failedFileList.push({
-      url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-      status: 'failed',
-      message: this.$t('failed'),
-    });
+    this.statusFileList.push(
+      {
+        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+        status: 'uploading',
+        message: this.$t('uploading'),
+      },
+      {
+        url: 'https://img.yzcdn.cn/vant/tree.jpg',
+        status: 'failed',
+        message: this.$t('failed'),
+      }
+    );
   },
 
   methods: {
@@ -88,8 +99,13 @@ export default {
     },
 
     afterReadFailed(item) {
-      item.status = 'failed';
-      item.message = this.$t('failed');
+      item.status = 'uploading';
+      item.message = this.$t('uploading');
+
+      setTimeout(() => {
+        item.status = 'failed';
+        item.message = this.$t('failed');
+      }, 1000);
     },
   },
 };

src/uploader/index.js

@@ -5,6 +5,7 @@ import { toArray, readFile, isOversize, isImageFile } from './utils';
 // Components
 import Icon from '../icon';
 import Image from '../image';
+import Loading from '../loading';
 import ImagePreview from '../image-preview';
 
 const [createComponent, bem] = createNamespace('uploader');
@@ -224,8 +225,32 @@ export default createComponent({
       }
     },
 
+    genPreviewMask(item) {
+      const { status } = item;
+
+      if (status === 'uploading' || status === 'failed') {
+        const MaskIcon =
+          status === 'failed' ? (
+            <Icon name="warning-o" class={bem('mask-icon')} />
+          ) : (
+            <Loading class={bem('loading')} />
+          );
+
+        return (
+          <div class={bem('mask')}>
+            {MaskIcon}
+            {item.message && (
+              <div class={bem('mask-message')}>{item.message}</div>
+            )}
+          </div>
+        );
+      }
+    },
+
     genPreviewItem(item, index) {
-      const DeleteIcon = this.deletable && (
+      const showDelete = item.status !== 'uploading' && this.deletable;
+
+      const DeleteIcon = showDelete && (
         <Icon
           name="clear"
           class={bem('preview-delete')}
@@ -263,15 +288,6 @@ export default createComponent({
         </div>
       );
 
-      const Mask = item.status === 'failed' && (
-        <div class={bem('mask')}>
-          <Icon name="warning-o" class={bem('mask-icon')} />
-          {item.message && (
-            <div class={bem('mask-message')}>{item.message}</div>
-          )}
-        </div>
-      );
-
       return (
         <div
           class={bem('preview')}
@@ -280,7 +296,7 @@ export default createComponent({
           }}
         >
           {Preview}
-          {Mask}
+          {this.genPreviewMask(item)}
           {DeleteIcon}
         </div>
       );

src/uploader/index.less

@@ -102,6 +102,12 @@
     }
   }
 
+  &__loading {
+    width: @uploader-loading-icon-size;
+    height: @uploader-loading-icon-size;
+    color: @uploader-loading-icon-color;
+  }
+
   &__file {
     display: flex;
     flex-direction: column;

src/uploader/test/__snapshots__/demo.spec.js.snap

@@ -40,6 +40,16 @@ exports[`renders demo correctly 1`] = `
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
                 <!----></i></div>
           </div>
+          <div class="van-uploader__mask">
+            <div class="van-loading van-loading--circular van-uploader__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+            <div class="van-uploader__mask-message">上传中...</div>
+          </div>
+        </div>
+        <div class="van-uploader__preview">
+          <div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+                <!----></i></div>
+          </div>
           <div class="van-uploader__mask"><i class="van-icon van-icon-warning-o van-uploader__mask-icon">
               <!----></i>
             <div class="van-uploader__mask-message">上传失败</div>