From 72e992e56e5ef7708635ec9d71cdbd022299497c Mon Sep 17 00:00:00 2001
From: Pocho <13343460801@163.com>
Date: Tue, 24 Dec 2019 14:58:44 +0800
Subject: [PATCH] feat(Uploader): add video accept type (#2584)
---
example/pages/uploader/index.js | 3 ++-
example/pages/uploader/index.wxml | 12 +++++++++-
example/project.config.json | 2 +-
packages/uploader/README.md | 7 ++++--
packages/uploader/index.ts | 40 +++++++++++++++++++++++++++++--
packages/uploader/utils.ts | 7 ++++++
6 files changed, 64 insertions(+), 7 deletions(-)
diff --git a/example/pages/uploader/index.js b/example/pages/uploader/index.js
index 90a865c0..282f38b7 100644
--- a/example/pages/uploader/index.js
+++ b/example/pages/uploader/index.js
@@ -11,7 +11,8 @@ Page({
fileList4: [],
fileList5: [],
fileList6: [],
- cloudPath: []
+ cloudPath: [],
+ fileList7: []
},
beforeRead(event) {
diff --git a/example/pages/uploader/index.wxml b/example/pages/uploader/index.wxml
index f6022828..bf57c223 100644
--- a/example/pages/uploader/index.wxml
+++ b/example/pages/uploader/index.wxml
@@ -8,6 +8,16 @@
/>
+
+
+
+
上传至云存储
-
\ No newline at end of file
+
diff --git a/example/project.config.json b/example/project.config.json
index 303f0f39..f8cebc50 100644
--- a/example/project.config.json
+++ b/example/project.config.json
@@ -339,4 +339,4 @@
]
}
}
-}
\ No newline at end of file
+}
diff --git a/packages/uploader/README.md b/packages/uploader/README.md
index 3ab03be5..565374f0 100644
--- a/packages/uploader/README.md
+++ b/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
diff --git a/packages/uploader/index.ts b/packages/uploader/index.ts
index 18a51145..318e91ed 100644
--- a/packages/uploader/index.ts
+++ b/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) {
diff --git a/packages/uploader/utils.ts b/packages/uploader/utils.ts
index 52776021..63323ae8 100644
--- a/packages/uploader/utils.ts
+++ b/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';
+}