feat(upload): add source property

src/upload/README.md

@@ -44,6 +44,7 @@ max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N
 media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片或视频。TS 类型：`Array<MediaType>` `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
 

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,
+      });
+    },
+  },
+});

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"
+  }
+}

src/upload/_example/messageFile/index.wxml

@@ -0,0 +1,14 @@
+<view class="wrapper">
+  <t-upload
+    addContent="slot"
+    mediaType="{{['video','image']}}"
+    files="{{originFiles}}"
+    gridConfig="{{gridConfig}}"
+    config="{{config}}"
+    source="messageFile"
+    bind:success="handleSuccess"
+    bind:remove="handleRemove"
+  >
+    <t-icon slot="add-content" name="add" size="40rpx" color="rgba(0,0,0,0.26)" />
+  </t-upload>
+</view>

src/upload/_example/upload.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "Upload 上传",
   "usingComponents": {
     "single": "./single",
-    "multiple": "./multiple"
+    "multiple": "./multiple",
+    "messageFile": "./messageFile"
   }
 }

src/upload/_example/upload.wxml

@@ -13,4 +13,10 @@
       <multiple />
     </view>
   </t-demo>
+  <t-demo title="" desc="从聊天记录上选">
+    <view class="upload-demo">
+      <view class="upload-demo__title">上传图片</view>
+      <messageFile />
+    </view>
+  </t-demo>
 </view>

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',
   },
 };
 

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<ObjectConstructor>;
+    type: null;
     value?: number | SizeLimitObj;
   };
+  /**
+   * 来源
+   * @default media
+   */
+  source?: {
+    type: StringConstructor;
+    value?: 'media' | 'messageFile';
+  };
 }
 
 export type UploadMpConfig = ImageConfig | VideoConfig;

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);
+    },
+  };
 }