feat(Uploader): add video accept type (#2584)

example/pages/uploader/index.js

@@ -11,7 +11,8 @@ Page({
     fileList4: [],
     fileList5: [],
     fileList6: [],
-    cloudPath: []
+    cloudPath: [],
+    fileList7: []
   },
 
   beforeRead(event) {

example/pages/uploader/index.wxml

@@ -8,6 +8,16 @@
   />
 </demo-block>
 
+<demo-block title="上传视频" padding>
+  <van-uploader
+    name="7"
+    accept="video"
+    file-list="{{ fileList7 }}"
+    bind:after-read="afterRead"
+    bind:delete="delete"
+  />
+</demo-block>
+
 <demo-block title="文件预览" padding>
   <van-uploader
     name="2"

packages/uploader/README.md

@@ -166,7 +166,7 @@ uploadFilePromise(fileName, chooseResult) {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |-----------|-----------|-----------|-----------|-----------|
 | name | 标识符，可以在回调函数的第二项参数中获取 | *string \| number* | - | - |
-| accept | 接受的文件类型, 可选值为`all` `image` `file` | *string* | `image` | - |
+| accept | 接受的文件类型, 可选值为`all` `image` `file` `video` | *string* | `image` | - |
 | sizeType | 所选的图片的尺寸, 当`accept`为`image`类型时设置所选图片的尺寸可选值为`original` `compressed`| *string[]* | `['original','compressed']` | - |
 | preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *string \| number* | `80px` | - |
 | preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` | - |
@@ -174,13 +174,16 @@ uploadFilePromise(fileName, chooseResult) {
 | multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` | - |
 | disabled | 是否禁用文件上传 | *boolean* | `false` | - |
 | deletable | 是否展示删除按钮 | *boolean* | `true` | - |
-| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | *string \| string[]* | `['album', 'camera']` | - |
+| 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` | - |
 | use-before-read | 是否开启文件读取前事件 | *boolean* | - | - |
+| camera | 当 accept 为 `video` 时生效，可选值为 `back` `front` | *string* | - | - |
+| compressed | 当 accept 为 `video` 时生效，是否压缩视频，默认为`true` | *boolean* | - | - |
+| max-duration | 当 accept 为 `video` 时生效，拍摄视频最长拍摄时间，单位秒 | *number* | - | - |
 
 ### Slot
 

packages/uploader/index.ts

@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { isImageFile } from './utils';
+import { isImageFile, isVideo } from './utils';
 
 VantComponent({
   props: {
@@ -55,6 +55,18 @@ VantComponent({
     imageFit: {
       type: String,
       value: 'scaleToFill'
+    },
+    camera: {
+      type: String,
+      value: 'back'
+    },
+    compressed: {
+      type: Boolean,
+      value: true
+    },
+    maxDuration: {
+      type: Number,
+      value: 60
     }
   },
 
@@ -86,6 +98,9 @@ VantComponent({
         accept,
         sizeType,
         lists,
+        camera,
+        compressed,
+        maxDuration,
         useBeforeRead = false // 是否定义了 beforeRead
       } = this.data;
 
@@ -102,6 +117,17 @@ VantComponent({
             fail: reject
           });
         });
+      } else if (accept === 'video') {
+        chooseFile = new Promise((resolve, reject) => {
+          wx.chooseVideo({
+            sourceType: capture,
+            compressed,
+            maxDuration,
+            camera,
+            success: resolve,
+            fail: reject
+          });
+        });
       } else {
         chooseFile = new Promise((resolve, reject) => {
           wx.chooseMessageFile({
@@ -119,8 +145,18 @@ VantComponent({
             res:
               | WechatMiniprogram.ChooseImageSuccessCallbackResult
               | WechatMiniprogram.ChooseMessageFileSuccessCallbackResult
+              | WechatMiniprogram.ChooseVideoSuccessCallbackResult
           ) => {
-            const file = multiple ? res.tempFiles : res.tempFiles[0];
+            let file = null;
+
+            if (isVideo(res, accept)) {
+              file = {
+                path: res.tempFilePath,
+                ...res
+              };
+            } else {
+              file = multiple ? res.tempFiles : res.tempFiles[0];
+            }
 
             // 检查文件大小
             if (file instanceof Array) {

packages/uploader/utils.ts

@@ -29,3 +29,10 @@ export function isImageFile(item: File): boolean {
 
   return false;
 }
+
+export function isVideo(
+  res,
+  accept
+): res is WechatMiniprogram.ChooseVideoSuccessCallbackResult {
+  return accept === 'video';
+}