Merge pull request #245 from xihangzhou/feature/upload

fix(upload): support uploading images and videos at the same time

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) {

example/pages/upload/upload.wxml

@@ -6,10 +6,12 @@
       <view class="item__title">上传图片</view>
       <view class="upload-wrapper">
         <t-upload
-          media-type="{{['image']}}"
-          defaultFiles="{{originFiles1}}"
+          mediaType="{{['video','image']}}"
+          files="{{originFiles1}}"
           bind:remove="handleRemove"
+          bind:success="handleSuccess"
           gridConfig="{{gridConfig}}"
+          config="{{config1}}"
         >
           <t-icon slot="addContent" name="add" size="40rpx" color="rgba(0,0,0,0.26)" />
         </t-upload>
@@ -21,7 +23,7 @@
       <view class="item__title">上传图片</view>
       <view class="upload-wrapper">
         <t-upload
-          media-type="{{['image']}}"
+          media-type="{{['video','image']}}"
           bind:remove="handleRemove2"
           bind:success="handleSuccess2"
           files="{{originFiles2}}"

src/upload/upload.ts

@@ -101,29 +101,33 @@ export default class Upload extends SuperComponent {
     return Promise.resolve();
   }
 
-  /** 选择图片 */
-  chooseImg() {
-    const { config, max, sizeLimit } = this.data;
+  /** 选择媒体素材 */
+  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 +147,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 +183,7 @@ export default class Upload extends SuperComponent {
 
   onAddTap() {
     const { mediaType } = this.properties;
-    // if (mediaType.length > 1) {
-    //   this.setData({ showPop: true });
-    //   return;
-    // }
-
-    switch (mediaType[0]) {
-      case 'video':
-        this.chooseVideo();
-        break;
-      case 'image':
-        this.chooseImg();
-        break;
-      default:
-        // 后续可能有file等类型
-        break;
-    }
+    this.chooseMedia(mediaType);
   }
 
   onChooseImage() {