From 1715df5ab357e77dd42bb6a4747922e8613bce51 Mon Sep 17 00:00:00 2001 From: xihangzhou Date: Thu, 10 Mar 2022 16:19:53 +0800 Subject: [PATCH 1/2] fix(upload): support uploading images and videos at the same time --- example/pages/upload/upload.ts | 36 +----- example/pages/upload/upload.wxml | 8 +- src/upload/upload.ts | 199 ++++++++++++++++++++----------- 3 files changed, 143 insertions(+), 100 deletions(-) diff --git a/example/pages/upload/upload.ts b/example/pages/upload/upload.ts index c34731092..fd6c36169 100644 --- a/example/pages/upload/upload.ts +++ b/example/pages/upload/upload.ts @@ -31,6 +31,9 @@ Page({ width: 160, height: 160, }, + config1: { + count: 1, + }, }, // onLoad() { // this.setData({ @@ -64,28 +67,13 @@ Page({ getRandFileName(filePath) { const extIndex = filePath.lastIndexOf('.'); const extName = extIndex === -1 ? '' : filePath.substr(extIndex); - return ( - parseInt(`${Date.now()}${Math.floor(Math.random() * 900 + 100)}`, 10).toString(36) + extName - ); + return parseInt(`${Date.now()}${Math.floor(Math.random() * 900 + 100)}`, 10).toString(36) + extName; }, handleSuccess(e) { - const { originFiles1 } = this.data; - - // 图片上传处理 const { files } = e.detail; - files.forEach((temp) => { - const name = this.getRandFileName(temp.url); - originFiles1.push({ - name, - type: 'image', - url: temp.url, - size: temp.size, - }); - }); - this.setData({ - originFiles1, + originFiles1: files, }); }, handleRemove(e) { @@ -97,22 +85,10 @@ Page({ }); }, handleSuccess2(e) { - const { originFiles2 } = this.data; - - // 图片上传处理 const { files } = e.detail; - files.forEach((temp) => { - const name = this.getRandFileName(temp.url); - originFiles2.push({ - name, - type: 'image', - url: temp.url, - size: temp.size, - }); - }); this.setData({ - originFiles2, + originFiles2: files, }); }, handleRemove2(e) { diff --git a/example/pages/upload/upload.wxml b/example/pages/upload/upload.wxml index 8a5adea65..ab7f021a9 100644 --- a/example/pages/upload/upload.wxml +++ b/example/pages/upload/upload.wxml @@ -6,10 +6,12 @@ 上传图片 @@ -21,7 +23,7 @@ 上传图片 { + // const files = []; + // res.tempFiles.forEach((temp) => { + // if (sizeLimit && temp.size > sizeLimit) { + // wx.showToast({ icon: 'none', title: '图片大小超过限制' }); + // return; + // } + // const name = this.getRandFileName(temp.tempFilePath); + // files.push({ + // name, + // type: 'image', + // url: temp.tempFilePath, + // width: temp.width, + // height: temp.height, + // size: temp.size, + // progress: 0, + // }); + // }); + // this._trigger('select-change', { + // files: [...this.data.customFiles], + // currentSelectedFiles: [files], + // }); + // this._trigger('add', { files }); + // this._trigger('success', { files: [...this.data.customFiles, ...files] }); + // this.startUpload(files); + // }, + // fail: (err) => { + // this.triggerEvent('fail', err); + // }, + // complete: (res) => { + // this.triggerEvent('complete', res); + // }, + // }); + // } + + /** 选择视频 */ + // chooseVideo() { + // const { config, sizeLimit } = this.data; + // wx.chooseMedia({ + // mediaType: ['video'], + // ...config, + // success: (res) => { + // const files = []; + // res.tempFiles.forEach((temp) => { + // if (sizeLimit && temp.size > sizeLimit) { + // wx.showToast({ icon: 'none', title: '视频大小超过限制' }); + // return; + // } + // const name = this.getRandFileName(temp.tempFilePath); + // files.push({ + // name, + // type: 'video', + // url: temp.tempFilePath, + // size: temp.size, + // width: temp.width, + // height: temp.height, + // duration: temp.duration, + // thumb: temp.thumbTempFilePath, + // progress: 0, + // }); + // }); + // this._trigger('select-change', { + // files: [...this.data.customFiles], + // currentSelectedFiles: [files], + // }); + // this._trigger('add', { files }); + // this._trigger('success', { files: [...this.data.customFiles, ...files] }); + // this.startUpload(files); + // }, + // fail: (err) => { + // this.triggerEvent('fail', err); + // }, + // complete: (res) => { + // this.triggerEvent('complete', res); + // }, + // }); + // } + + /** 选择媒体素材 */ + chooseMedia(mediaType) { + const { config, sizeLimit, max } = this.data; wx.chooseMedia({ count: max === 0 ? 9 : max, // 在 iOS 里，0 是无效的，会导致抛异常 - mediaType: ['image'], + mediaType, ...config, success: (res) => { const files = []; res.tempFiles.forEach((temp) => { - if (sizeLimit && temp.size > sizeLimit) { - wx.showToast({ icon: 'none', title: '图片大小超过限制' }); + 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(temp.tempFilePath); + const name = this.getRandFileName(tempFilePath); files.push({ name, - type: 'image', - url: temp.tempFilePath, - width: temp.width, - height: temp.height, - size: temp.size, + type: this.getFileType(mediaType, tempFilePath, fileType), + url: tempFilePath, + size: size, + width: width, + height: height, + duration: duration, + thumb: thumbTempFilePath, progress: 0, + ...res, }); }); this._trigger('select-change', { @@ -143,47 +232,27 @@ export default class Upload extends SuperComponent { }); } - /** 选择视频 */ - chooseVideo() { - const { config, sizeLimit } = this.data; - wx.chooseMedia({ - mediaType: ['video'], - ...config, - success: (res) => { - const files = []; - res.tempFiles.forEach((temp) => { - if (sizeLimit && temp.size > sizeLimit) { - wx.showToast({ icon: 'none', title: '视频大小超过限制' }); - return; - } - const name = this.getRandFileName(temp.tempFilePath); - files.push({ - name, - type: 'video', - url: temp.tempFilePath, - size: temp.size, - width: temp.width, - height: temp.height, - duration: temp.duration, - thumb: temp.thumbTempFilePath, - progress: 0, - }); - }); - this._trigger('select-change', { - files: [...this.data.customFiles], - currentSelectedFiles: [files], - }); - this._trigger('add', { files }); - this._trigger('success', { files: [...this.data.customFiles, ...files] }); - this.startUpload(files); - }, - fail: (err) => { - this.triggerEvent('fail', err); - }, - complete: (res) => { - this.triggerEvent('complete', res); - }, - }); + /** + * 由于小程序暂时在ios上不支持返回上传文件的fileType，这里用文件的后缀来判断 + * @param mediaType + * @param tempFilePath + * @returns string + * @link https://developers.weixin.qq.com/community/develop/doc/00042820b28ee8fb41fc4d0c254c00 + */ + getFileType(mediaType: string[], tempFilePath: string, fileType?: string) { + if (fileType) return fileType; // 如果有返回fileType就直接用 + if (mediaType.length === 1) { + // 在单选媒体类型的时候直接使用单选媒体类型 + return mediaType[0]; + } + // 否则根据文件后缀进行判读 + const videoType = ['avi', 'wmv', 'mkv', 'mp4', 'mov', 'rm', '3gp', 'flv', 'mpg', 'rmvb']; + const temp = tempFilePath.split('.'); + const postfix = temp[temp.length - 1]; + if (videoType.includes(postfix.toLocaleLowerCase())) { + return 'video'; + } + return 'image'; } // 选中文件之后，计算一个随机的短文件名 @@ -199,22 +268,18 @@ export default class Upload extends SuperComponent { onAddTap() { const { mediaType } = this.properties; - // if (mediaType.length > 1) { - // this.setData({ showPop: true }); - // return; + this.chooseMedia(mediaType); + // switch (mediaType[0]) { + // case 'video': + // this.chooseVideo(); + // break; + // case 'image': + // this.chooseImg(); + // break; + // default: + // // 后续可能有file等类型 + // break; // } - - switch (mediaType[0]) { - case 'video': - this.chooseVideo(); - break; - case 'image': - this.chooseImg(); - break; - default: - // 后续可能有file等类型 - break; - } } onChooseImage() { From 70dc5c70b27ac0969bf0ce977a82beda3369666f Mon Sep 17 00:00:00 2001 From: xihangzhou Date: Thu, 10 Mar 2022 16:24:20 +0800 Subject: [PATCH 2/2] fix(upload): clear useless code --- src/upload/upload.ts | 96 -------------------------------------------- 1 file changed, 96 deletions(-) diff --git a/src/upload/upload.ts b/src/upload/upload.ts index 18e35921e..ebbe87187 100644 --- a/src/upload/upload.ts +++ b/src/upload/upload.ts @@ -101,91 +101,6 @@ export default class Upload extends SuperComponent { return Promise.resolve(); } - /** 选择图片 */ - // chooseImg() { - // const { config, max, sizeLimit } = this.data; - // wx.chooseMedia({ - // count: max === 0 ? 9 : max, // 在 iOS 里，0 是无效的，会导致抛异常 - // mediaType: ['image'], - // ...config, - // success: (res) => { - // const files = []; - // res.tempFiles.forEach((temp) => { - // if (sizeLimit && temp.size > sizeLimit) { - // wx.showToast({ icon: 'none', title: '图片大小超过限制' }); - // return; - // } - // const name = this.getRandFileName(temp.tempFilePath); - // files.push({ - // name, - // type: 'image', - // url: temp.tempFilePath, - // width: temp.width, - // height: temp.height, - // size: temp.size, - // progress: 0, - // }); - // }); - // this._trigger('select-change', { - // files: [...this.data.customFiles], - // currentSelectedFiles: [files], - // }); - // this._trigger('add', { files }); - // this._trigger('success', { files: [...this.data.customFiles, ...files] }); - // this.startUpload(files); - // }, - // fail: (err) => { - // this.triggerEvent('fail', err); - // }, - // complete: (res) => { - // this.triggerEvent('complete', res); - // }, - // }); - // } - - /** 选择视频 */ - // chooseVideo() { - // const { config, sizeLimit } = this.data; - // wx.chooseMedia({ - // mediaType: ['video'], - // ...config, - // success: (res) => { - // const files = []; - // res.tempFiles.forEach((temp) => { - // if (sizeLimit && temp.size > sizeLimit) { - // wx.showToast({ icon: 'none', title: '视频大小超过限制' }); - // return; - // } - // const name = this.getRandFileName(temp.tempFilePath); - // files.push({ - // name, - // type: 'video', - // url: temp.tempFilePath, - // size: temp.size, - // width: temp.width, - // height: temp.height, - // duration: temp.duration, - // thumb: temp.thumbTempFilePath, - // progress: 0, - // }); - // }); - // this._trigger('select-change', { - // files: [...this.data.customFiles], - // currentSelectedFiles: [files], - // }); - // this._trigger('add', { files }); - // this._trigger('success', { files: [...this.data.customFiles, ...files] }); - // this.startUpload(files); - // }, - // fail: (err) => { - // this.triggerEvent('fail', err); - // }, - // complete: (res) => { - // this.triggerEvent('complete', res); - // }, - // }); - // } - /** 选择媒体素材 */ chooseMedia(mediaType) { const { config, sizeLimit, max } = this.data; @@ -269,17 +184,6 @@ export default class Upload extends SuperComponent { onAddTap() { const { mediaType } = this.properties; this.chooseMedia(mediaType); - // switch (mediaType[0]) { - // case 'video': - // this.chooseVideo(); - // break; - // case 'image': - // this.chooseImg(); - // break; - // default: - // // 后续可能有file等类型 - // break; - // } } onChooseImage() {