docs(Uploader): update document and demo (#2399)

example/pages/uploader/index.js

@@ -2,12 +2,12 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    fileList1: [],
+    fileList: [],
     fileList2: [
-      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', name: '图片1' },
-      { url: 'http://iph.href.lu/60x60?text=default', name: '图片2', isImage: true }
+      { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+      { url: 'https://img.yzcdn.cn/vant/tree.jpg' }
     ],
-    fileList3: [],
+    fileList3: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
     fileList4: [],
     fileList5: []
   },

example/pages/uploader/index.wxss

@@ -1 +1,3 @@
-/* pages/tag/index.wxss */
+page {
+  background-color: #fff;
+}

example/project.config.json

@@ -329,6 +329,12 @@
 					"pathName": "pages/skeleton/index",
 					"query": "",
 					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "uploader",
+					"pathName": "pages/uploader/index",
+					"scene": null
 				}
 			]
 		}

packages/uploader/README.md

@@ -25,21 +25,21 @@
 #### js 示例
 
 ```js
-{
+Page({
   data: {
     fileList: []
   },
   methods: {
     afterRead(event) {
       const { file } = event.detail;
-      // 当设置 mutiple 为 true 是 file 是一个数组，mutiple 默认为 false，file 是一个对象
+      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
       wx.uploadFile({
-        url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
+        url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
         filePath: file.path,
         name: 'file',
         formData: { 'user': 'test' },
         success (res){
-          // 上传完成需要更新fileList
+          // 上传完成需要更新 fileList
           const { fileList = [] } = this.data;
           fileList.push({ ...file, url: res.data });
           this.setData({ fileList });
@@ -47,7 +47,7 @@
       });
     }
   }
-}
+});
 ```
 
 ### 图片预览
@@ -59,16 +59,16 @@
 ```
 
 ```js
-{
+Page({
   data: {
     fileList: [
-      { url: 'https://img.yzcdn.cn/vant/cat.jpeg', name: '图片1' },
+      { url: 'https://img.yzcdn.cn/vant/leaf.jpg', name: '图片1' },
       // Uploader 根据文件后缀来判断是否为图片文件
       // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
       { url: 'http://iph.href.lu/60x60?text=default', name: '图片2', isImage: true }
     ]
   }
-}
+});
 ```
 
 ### 限制上传数量
@@ -76,7 +76,11 @@
 通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
 
 ```html
-<van-uploader file-list="{{ fileList }}" max-count="2" bind:after-read="afterRead" />
+<van-uploader
+  file-list="{{ fileList }}"
+  max-count="2"
+  bind:after-read="afterRead"
+/>
 ```
 
 ### 自定义上传样式
@@ -94,57 +98,57 @@
 将`use-before-read`属性设置为`true`，然后绑定 `before-read` 事件可以在上传前进行校验，调用 `callback` 方法传入 `true` 表示校验通过，传入 `false` 表示校验失败。
 
 ```html
-<van-uploader file-list="{{ fileList }}" use-before-read="{{ true }}" bind:before-read="beforeRead" bind:after-read="afterRead" />
+<van-uploader
+  file-list="{{ fileList }}"
+  use-before-read
+  bind:before-read="beforeRead"
+  bind:after-read="afterRead"
+/>
 ```
 
 ```js
-{
+Page({
   data: {
     fileList: []
   },
 
   methods: {
     beforeRead(event) {
-      const { file, callback = () => {} } = event.detail;
-      console.log('before上传', file);
-      if (file.type !== 'image') {
-        callback(false);
-        return;
-      }
-      callback(true);
+      const { file, callback } = event.detail;
+      callback(file.type === 'image');
     }
   }
-}
+});
 ```
 
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |-----------|-----------|-----------|-----------|-----------|
-| name | 标识符，可以在回调函数的第二项参数中获取 | _string \| number_ | - |
-| accept | 接受的文件类型, 可选值为`all` `image` `file` | _string_ | `image` |
-| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | _string \| number_ | `80px` |
-| preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` |
-| preview-full-image | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` |
-| multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` |
-| disabled | 是否禁用文件上传 | _boolean_ | `false` |
-| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | _string \| Array_ | `['album', 'camera']` |
-| disabled | 是否禁用文件上传 | _boolean_ | `false` |
-| max-size | 文件大小限制，单位为`byte` | _number_ | - |
-| max-count | 文件上传数量限制 | _number_ | - |
-| upload-text | 上传区域文字提示 | _string_ | - |
-| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | _string_ | `scaleToFill` |
+| name | 标识符，可以在回调函数的第二项参数中获取 | *string \| number* | - |
+| accept | 接受的文件类型, 可选值为`all` `image` `file` | *string* | `image` |
+| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *string \| number* | `80px` |
+| preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` |
+| preview-full-image | 是否在点击预览图后展示全屏图片预览 | *boolean* | `true` |
+| multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` |
+| disabled | 是否禁用文件上传 | *boolean* | `false` |
+| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | *string \| string[]* | `['album', 'camera']` |
+| disabled | 是否禁用文件上传 | *boolean* | `false` |
+| max-size | 文件大小限制，单位为`byte` | *number* | - |
+| max-count | 文件上传数量限制 | *number* | - |
+| upload-text | 上传区域文字提示 | *string* | - |
+| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` |
 
 ### Slot
 
 | 名称 | 说明 |
-| ---- | -------------------------------- |
-| - | 自定义上传样式，用法见上面的例子 |
+|-----------|-----------|
+| - | 自定义上传样式 |
 
 ### Event
 
-| 事件名 | 说明 | 参数 |
-| ------------------ | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
 | bind:before-read | 文件读取前的回调函数，返回 `false` 可终止文件读取，绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件，`event.detail.callback`: 回调函数，调用`callback(false)`终止文件读取 |
 | bind:after-read | 文件读取完成后的回调函数 | `event.detail.file`: 当前读取的文件 |
 | bind:oversize | 文件超出大小限制的回调函数 | - |

packages/uploader/index.wxml

@@ -1,60 +1,56 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
-<view
-  class="van-uploader"
->
+<view class="van-uploader">
   <view class="van-uploader__wrapper">
     <!-- 预览样式 -->
-    <block wx:if="{{ previewImage }}">
+    <view
+      wx:if="{{ previewImage }}"
+      wx:for="{{ lists  }}"
+      wx:key="index"
+      class="van-uploader__preview"
+    >
+      <image
+        wx:if="{{ item.isImage }}"
+        mode="{{ imageFit }}"
+        src="{{ item.url || item.path }}"
+        alt="{{ item.name || ('图片' + index) }}"
+        class="van-uploader__preview-image"
+        style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
+        data-url="{{ item.url || item.path }}"
+        bind:tap="doPreviewImage"
+      />
       <view
-        wx:for="{{ lists  }}"
-        wx:key="index"
-        class="van-uploader__preview"
+        wx:else
+        class="van-uploader__file"
+        style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
       >
-        <image
-          wx:if="{{ item.isImage }}"
-          mode="{{ imageFit }}"
-          src="{{ item.url || item.path }}"
-          alt="{{ item.name || ('图片' + index) }}"
-          class="van-uploader__preview-image"
-          style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
-          data-url="{{ item.url || item.path }}"
-          bind:tap="doPreviewImage"
-        />
-        <view
-          wx:else
-          class="van-uploader__file"
-          style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
-        >
-          <van-icon name="description" class="van-uploader__file-icon" />
-          <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
-        </view>
-        <van-icon
-          name="delete"
-          class="van-uploader__preview-delete"
-          bind:tap="deleteItem"
-          data-index="{{ index }}"
-        />
+        <van-icon name="description" class="van-uploader__file-icon" />
+        <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
       </view>
-    </block>
+      <van-icon
+        name="delete"
+        class="van-uploader__preview-delete"
+        data-index="{{ index }}"
+        bind:tap="deleteItem"
+      />
+    </view>
+
     <!-- 上传样式 -->
     <block wx:if="{{ isInCount }}">
-      <block wx:if="{{ useSlot }}">
-        <view class="van-uploader__slot" bind:tap="startUpload">
-          <slot />
-        </view>
-      </block>
-      <block wx:else>
-        <!-- 默认上传样式 -->
-        <view
-          class="van-uploader__upload"
-          style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
-          bind:tap="startUpload"
-        >
-          <van-icon name="plus" class="van-uploader__upload-icon" />
-          <text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text>
-        </view>
-      </block>
+      <view wx:if="{{ useSlot }}" class="van-uploader__slot" bind:tap="startUpload">
+        <slot />
+      </view>
+
+      <!-- 默认上传样式 -->
+      <view
+        wx:else
+        class="van-uploader__upload"
+        style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
+        bind:tap="startUpload"
+      >
+        <van-icon name="plus" class="van-uploader__upload-icon" />
+        <text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text>
+      </view>
     </block>
   </view>
 </view>