fix(Uploader): remove use-slot & catch upload error & fix prop capture not work (#2551)

fix #2541, fix #2544

packages/uploader/README.md

@@ -87,10 +87,10 @@ Page({
 
 ### 自定义上传样式
 
-将`use-slot`属性设置为`true`，通过插槽可以自定义上传区域的样式
+通过插槽可以自定义上传区域的样式
 
 ```html
-<van-uploader use-slot>
+<van-uploader>
   <van-button icon="photo" type="primary">上传图片</van-button>
 </van-uploader>
 ```
@@ -179,18 +179,20 @@ uploadFilePromise(fileName, chooseResult) {
 | max-count | 文件上传数量限制 | *number* | - | - |
 | upload-text | 上传区域文字提示 | *string* | - | - |
 | image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` | - |
+| use-before-read | 是否开启文件读取前事件 | *boolean* | - | - |
+
 ### Slot
 
 | 名称 | 说明 |
 |-----------|-----------|
-| - | 自定义上传样式 |
+| - | 自定义上传区域 |
 
 ### Event
 
 | 事件名 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
-| bind:before-read | 文件读取前的回调函数，返回 `false` 可终止文件读取，绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件，`event.detail.callback`: 回调函数，调用`callback(false)`终止文件读取 |
+| bind:before-read | 文件读取前，在回调函数中返回 `false` 可终止文件读取，绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件，`event.detail.callback`: 回调函数，调用`callback(false)`终止文件读取 |
-| bind:after-read | 文件读取完成后的回调函数 | `event.detail.file`: 当前读取的文件 |
+| bind:after-read | 文件读取完成后 | `event.detail.file`: 当前读取的文件 |
-| bind:oversize | 文件超出大小限制的回调函数 | - |
+| bind:oversize | 文件超出大小限制 | - |
-| bind:click-preview | 点击预览图片的回调函数 | `event.detail.index`: 点击图片的序号值 |
+| bind:click-preview | 点击预览图片 | `event.detail.index`: 点击图片的序号值 |
-| bind:delete | 删除图片的回调函数 | `event.detail.index`: 删除图片的序号值 |
+| bind:delete | 删除图片 | `event.detail.index`: 删除图片的序号值 |

packages/uploader/index.less

@@ -9,6 +9,14 @@
     flex-wrap: wrap;
   }
 
+  &__slot:empty {
+    display: none;
+  }
+
+  &__slot:not(:empty) + &__upload {
+    display: none !important;
+  }
+
   &__upload {
     position: relative;
     display: flex;

packages/uploader/index.ts

@@ -6,7 +6,6 @@ VantComponent({
     disabled: Boolean,
     multiple: Boolean,
     uploadText: String,
-    useSlot: Boolean,
     useBeforeRead: Boolean,
     previewSize: {
       type: null,
@@ -20,6 +19,10 @@ VantComponent({
       type: String,
       value: 'image'
     },
+    capture: {
+      type: Array,
+      value: ['album', 'camera']
+    },
     fileList: {
       type: Array,
       value: [],
@@ -72,9 +75,9 @@ VantComponent({
       if (this.data.disabled) return;
       const {
         name = '',
-        capture = ['album', 'camera'],
+        capture,
-        maxCount = 100,
+        maxCount,
-        multiple = false,
+        multiple,
         maxSize,
         accept,
         lists,
@@ -104,7 +107,8 @@ VantComponent({
         });
       }
 
-      chooseFile.then(
+      chooseFile
+        .then(
           (
             res:
               | WechatMiniprogram.ChooseImageSuccessCallbackResult
@@ -140,7 +144,10 @@ VantComponent({
               this.$emit('after-read', { file, name });
             }
           }
-      );
+        )
+        .catch(error => {
+          this.$emit('error', error);
+        });
     },
 
     deleteItem(event) {

packages/uploader/index.wxml

@@ -38,13 +38,12 @@
 
     <!-- 上传样式 -->
     <block wx:if="{{ isInCount }}">
-      <view wx:if="{{ useSlot }}" class="van-uploader__slot" bind:tap="startUpload">
+      <view class="van-uploader__slot" bind:tap="startUpload">
         <slot />
       </view>
 
       <!-- 默认上传样式 -->
       <view
-        wx:else
         class="van-uploader__upload"
         style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
         bind:tap="startUpload"