From f437b571f9f8584e5627c1cea9e2c9d26f7adc6f Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Mon, 19 Sep 2022 17:20:34 +0800 Subject: [PATCH] feat(upload): add source property --- src/upload/README.md | 1 + src/upload/_example/messageFile/index.js | 35 +++++ src/upload/_example/messageFile/index.json | 7 + src/upload/_example/messageFile/index.wxml | 14 ++ src/upload/_example/messageFile/index.wxss | 0 src/upload/_example/upload.json | 3 +- src/upload/_example/upload.wxml | 6 + src/upload/props.ts | 8 +- src/upload/type.ts | 17 ++- src/upload/upload.ts | 147 +++++++++++++-------- 10 files changed, 176 insertions(+), 62 deletions(-) create mode 100644 src/upload/_example/messageFile/index.js create mode 100644 src/upload/_example/messageFile/index.json create mode 100644 src/upload/_example/messageFile/index.wxml create mode 100644 src/upload/_example/messageFile/index.wxss diff --git a/src/upload/README.md b/src/upload/README.md index 964bf2233..d813ff923 100644 --- a/src/upload/README.md +++ b/src/upload/README.md @@ -44,6 +44,7 @@ max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片或视频。TS 类型：`Array` `type MediaType = 'image' | 'video'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N request-method | Function | - | 自定义上传方法 | N size-limit | Number / Object | - | 图片文件大小限制，单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number | SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +source | String | media | 来源。可选项：media/messageFile | N ### Upload Events diff --git a/src/upload/_example/messageFile/index.js b/src/upload/_example/messageFile/index.js new file mode 100644 index 000000000..645ed45c0 --- /dev/null +++ b/src/upload/_example/messageFile/index.js @@ -0,0 +1,35 @@ +Component({ + data: { + originFiles: [ + { + url: 'https://tdesign.gtimg.com/site/upload1.png', + name: 'uploaded1.png', + type: 'image', + }, + ], + gridConfig: { + column: 4, + width: 160, + height: 160, + }, + config: { + count: 1, + }, + }, + methods: { + handleSuccess(e) { + const { files } = e.detail; + this.setData({ + originFiles: files, + }); + }, + handleRemove(e) { + const { index } = e.detail; + const { originFiles } = this.data; + originFiles.splice(index, 1); + this.setData({ + originFiles, + }); + }, + }, +}); diff --git a/src/upload/_example/messageFile/index.json b/src/upload/_example/messageFile/index.json new file mode 100644 index 000000000..106061c2c --- /dev/null +++ b/src/upload/_example/messageFile/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-upload": "tdesign-miniprogram/upload/upload", + "t-icon": "tdesign-miniprogram/icon/icon" + } +} diff --git a/src/upload/_example/messageFile/index.wxml b/src/upload/_example/messageFile/index.wxml new file mode 100644 index 000000000..1ad60d5e3 --- /dev/null +++ b/src/upload/_example/messageFile/index.wxml @@ -0,0 +1,14 @@ + + + + + diff --git a/src/upload/_example/messageFile/index.wxss b/src/upload/_example/messageFile/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/upload/_example/upload.json b/src/upload/_example/upload.json index c55afde33..abad6d521 100644 --- a/src/upload/_example/upload.json +++ b/src/upload/_example/upload.json @@ -2,6 +2,7 @@ "navigationBarTitleText": "Upload 上传", "usingComponents": { "single": "./single", - "multiple": "./multiple" + "multiple": "./multiple", + "messageFile": "./messageFile" } } diff --git a/src/upload/_example/upload.wxml b/src/upload/_example/upload.wxml index 9b16b0e31..56815a886 100644 --- a/src/upload/_example/upload.wxml +++ b/src/upload/_example/upload.wxml @@ -13,4 +13,10 @@ + + + 上传图片 + + + diff --git a/src/upload/props.ts b/src/upload/props.ts index 1a15388ed..bd51891ea 100644 --- a/src/upload/props.ts +++ b/src/upload/props.ts @@ -57,8 +57,12 @@ const props: TdUploadProps = { }, /** 图片文件大小限制，单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` */ sizeLimit: { - type: Number, - optionalTypes: [Object], + type: null, + }, + /** 来源 */ + source: { + type: String, + value: 'media', }, }; diff --git a/src/upload/type.ts b/src/upload/type.ts index 634eb8f7c..dae2c6c2c 100644 --- a/src/upload/type.ts +++ b/src/upload/type.ts @@ -48,11 +48,7 @@ export interface TdUploadProps { */ gridConfig?: { type: ObjectConstructor; - value?: { - column?: number; - width?: number; - height?: number; - }; + value?: { column?: number; width?: number; height?: number }; }; /** * 预览窗格的 `gutter` 大小，单位 rpx @@ -96,10 +92,17 @@ export interface TdUploadProps { * 图片文件大小限制，单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` */ sizeLimit?: { - type: NumberConstructor; - optionalTypes: Array; + type: null; value?: number | SizeLimitObj; }; + /** + * 来源 + * @default media + */ + source?: { + type: StringConstructor; + value?: 'media' | 'messageFile'; + }; } export type UploadMpConfig = ImageConfig | VideoConfig; diff --git a/src/upload/upload.ts b/src/upload/upload.ts index 36bd2ef00..7bedb51e1 100644 --- a/src/upload/upload.ts +++ b/src/upload/upload.ts @@ -127,53 +127,6 @@ export default class Upload extends SuperComponent { this.triggerEvent('click', { file }); } - /** 选择媒体素材 */ - chooseMedia(mediaType) { - const { config, sizeLimit, max } = this.data; - wx.chooseMedia({ - count: max === 0 ? 9 : max, // 在 iOS 里，0 是无效的，会导致抛异常 - mediaType, - ...config, - success: (res) => { - const files = []; - - // 支持单/多文件 - res.tempFiles.forEach((temp) => { - const { size, fileType, tempFilePath, width, height, duration, thumbTempFilePath, ...res } = temp; - if (sizeLimit && size > sizeLimit) { - wx.showToast({ icon: 'none', title: `${fileType === 'image' ? '图片' : '视频'}大小超过限制` }); - return; - } - const name = this.getRandFileName(tempFilePath); - files.push({ - name, - type: this.getFileType(mediaType, tempFilePath, fileType), - url: tempFilePath, - size: size, - width: width, - height: height, - duration: duration, - thumb: thumbTempFilePath, - percent: 0, - ...res, - }); - }); - this._trigger('select-change', { - files: [...this.data.customFiles], - currentSelectedFiles: [files], - }); - this._trigger('add', { files }); - this.startUpload(files); - }, - fail: (err) => { - this.triggerFailEvent(err); - }, - complete: (res) => { - this.triggerEvent('complete', res); - }, - }); - } - /** * 由于小程序暂时在ios上不支持返回上传文件的fileType，这里用文件的后缀来判断 * @param mediaType @@ -204,11 +157,6 @@ export default class Upload extends SuperComponent { return parseInt(`${Date.now()}${Math.floor(Math.random() * 900 + 100)}`, 10).toString(36) + extName; } - onAddTap() { - const { mediaType } = this.properties; - this.chooseMedia(mediaType); - } - onDelete(e: any) { const { index } = e.currentTarget.dataset; this.deleteHandle(index); @@ -229,4 +177,99 @@ export default class Upload extends SuperComponent { column: column, }); } + + methods = { + onAddTap() { + const { mediaType, source } = this.properties; + + if (source === 'media') { + this.chooseMedia(mediaType); + } else { + this.chooseMessageFile(mediaType); + } + }, + + chooseMedia(mediaType) { + const { config, sizeLimit, max } = this.data; + wx.chooseMedia({ + count: max === 0 ? 9 : max, // 在 iOS 里，0 是无效的，会导致抛异常 + mediaType, + ...config, + success: (res) => { + const files = []; + + // 支持单/多文件 + res.tempFiles.forEach((temp) => { + const { size, fileType, tempFilePath, width, height, duration, thumbTempFilePath, ...res } = temp; + if (sizeLimit && size > sizeLimit) { + wx.showToast({ icon: 'none', title: `${fileType === 'image' ? '图片' : '视频'}大小超过限制` }); + return; + } + const name = this.getRandFileName(tempFilePath); + files.push({ + name, + type: this.getFileType(mediaType, tempFilePath, fileType), + url: tempFilePath, + size: size, + width: width, + height: height, + duration: duration, + thumb: thumbTempFilePath, + percent: 0, + ...res, + }); + }); + this.afterSelect(files); + }, + fail: (err) => { + this.triggerFailEvent(err); + }, + complete: (res) => { + this.triggerEvent('complete', res); + }, + }); + }, + + chooseMessageFile(mediaType) { + const { max, config, sizeLimit } = this.properties; + wx.chooseMessageFile({ + count: max, + type: Array.isArray(mediaType) ? 'all' : mediaType, + ...config, + success: (res) => { + const files = []; + + // 支持单/多文件 + res.tempFiles.forEach((temp) => { + const { size, type: fileType, path: tempFilePath, ...res } = temp; + if (sizeLimit && size > sizeLimit) { + wx.showToast({ icon: 'none', title: `${fileType === 'image' ? '图片' : '视频'}大小超过限制` }); + return; + } + const name = this.getRandFileName(tempFilePath); + files.push({ + name, + type: this.getFileType(mediaType, tempFilePath, fileType), + url: tempFilePath, + size: size, + percent: 0, + ...res, + }); + }); + this.afterSelect(files); + }, + fail: (err) => this.triggerFailEvent(err), + complete: (res) => this.triggerEvent('complete', res), + }); + }, + + afterSelect(files) { + this._trigger('select-change', { + files: [...this.data.customFiles], + currentSelectedFiles: [files], + }); + this._trigger('add', { files }); + this.startUpload(files); + }, + }; }