feat(Uploader): support failed status (#5624)

src/style/var.less

@@ -781,6 +781,10 @@
 @uploader-file-name-margin-top: @padding-xs;
 @uploader-file-name-font-size: @font-size-sm;
 @uploader-file-name-text-color: @gray-7;
+@uploader-mask-background-color: fade(@gray-8, 88%);
+@uploader-mask-icon-size: 22px;
+@uploader-mask-message-font-size: @font-size-sm;
+@uploader-mask-message-line-height: 14px;
 
 // Sku
 @sku-item-background-color: @background-color;

src/uploader/README.md

@@ -45,6 +45,28 @@ export default {
 };
 ```
 
+### Failed
+
+```html
+<van-uploader v-model="fileList" :after-read="afterRead" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      fileList: []
+    }
+  },
+  methods: {
+    afterRead(file) {
+      file.status = 'failed';
+      file.message = 'Failed';
+    }
+  }
+};
+```
+
 ### Max Count
 
 ```html

src/uploader/README.zh-CN.md

@@ -30,9 +30,9 @@ export default {
 };
 ```
 
-### 图片预览
+### 文件预览
 
-通过`v-model`可以绑定已经上传的图片列表，并展示图片列表的预览图
+通过`v-model`可以绑定已经上传的文件列表，并展示文件列表的预览图
 
 ```html
 <van-uploader v-model="fileList" multiple />
@@ -53,6 +53,30 @@ export default {
 };
 ```
 
+### 上传失败
+
+将 file 的`status`设置为`failed`表示文件上传失败
+
+```html
+<van-uploader v-model="fileList" :after-read="afterRead" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      fileList: []
+    }
+  },
+  methods: {
+    afterRead(file) {
+      file.status = 'failed';
+      file.message = '上传失败';
+    }
+  }
+};
+```
+
 ### 限制上传数量
 
 通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
@@ -81,7 +105,7 @@ export default {
 
 ```html
 <van-uploader>
-  <van-button icon="photo" type="primary">上传图片</van-button>
+  <van-button icon="photo" type="primary">上传文件</van-button>
 </van-uploader>
 ```
 

src/uploader/demo/index.vue

@@ -8,6 +8,10 @@
       <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>
+
     <demo-block :title="$t('maxCount')">
       <van-uploader v-model="fileList2" multiple :max-count="2" />
     </demo-block>
@@ -30,6 +34,7 @@
 export default {
   i18n: {
     'zh-CN': {
+      failed: '上传失败',
       upload: '上传文件',
       preview: '文件预览',
       maxCount: '限制上传数量',
@@ -38,6 +43,7 @@ export default {
       invalidType: '请上传 jpg 格式图片',
     },
     'en-US': {
+      failed: 'Failed',
       upload: 'Upload File',
       preview: 'Preview File',
       maxCount: 'Max Count',
@@ -55,9 +61,18 @@ export default {
       ],
       fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
       fileList3: [],
+      failedFileList: [],
     };
   },
 
+  created() {
+    this.failedFileList.push({
+      url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+      status: 'failed',
+      message: this.$t('failed'),
+    });
+  },
+
   methods: {
     beforeRead(file) {
       if (file.type !== 'image/jpeg') {
@@ -71,6 +86,11 @@ export default {
     afterRead(file, detail) {
       console.log(file, detail);
     },
+
+    afterReadFailed(item) {
+      item.status = 'failed';
+      item.message = this.$t('failed');
+    },
   },
 };
 </script>

src/uploader/index.js

@@ -123,7 +123,7 @@ export default createComponent({
         Promise.all(files.map(file => readFile(file, this.resultType))).then(
           contents => {
             const fileList = files.map((file, index) => {
-              const result = { file };
+              const result = { file, status: '' };
 
               if (contents[index]) {
                 result.content = contents[index];
@@ -137,7 +137,7 @@ export default createComponent({
         );
       } else {
         readFile(files, this.resultType).then(content => {
-          const result = { file: files };
+          const result = { file: files, status: '' };
 
           if (content) {
             result.content = content;
@@ -263,6 +263,15 @@ 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')}
@@ -271,6 +280,7 @@ export default createComponent({
           }}
         >
           {Preview}
+          {Mask}
           {DeleteIcon}
         </div>
       );

src/uploader/index.less

@@ -76,6 +76,32 @@
     }
   }
 
+  &__mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: @white;
+    background-color: @uploader-mask-background-color;
+    border-radius: @uploader-upload-border-radius;
+
+    &-icon {
+      font-size: @uploader-mask-icon-size;
+    }
+
+    &-message {
+      margin-top: 6px;
+      padding: 0 @padding-base;
+      font-size: @uploader-mask-message-font-size;
+      line-height: @uploader-mask-message-line-height;
+    }
+  }
+
   &__file {
     display: flex;
     flex-direction: column;

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

@@ -32,6 +32,25 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-uploader">
+      <div class="van-uploader__wrapper">
+        <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/leaf.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>
+          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
+            <!----></i>
+        </div>
+        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+            <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-uploader">
       <div class="van-uploader__wrapper">

src/uploader/utils.ts

@@ -41,6 +41,8 @@ export type FileListItem = {
   file?: File;
   content?: string; // dataUrl
   isImage?: boolean;
+  status?: '' | 'uploading' | 'done' | 'failed';
+  message?: string;
 };
 
 const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;