Merge pull request #181 from Tencent/fix/upload/event

fix(upload): change upload event & fix _trigger
Tencent · Feb 15, 2022 · 50a36dc · 50a36dc
2 parents 10d5477 + 42c6e4f
commit 50a36dc
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/example/pages/upload/upload.ts b/example/pages/upload/upload.ts
@@ -72,14 +72,14 @@ Page({
     const { originFiles1 } = this.data;
 
     // 图片上传处理
-    const { tempFiles } = e.detail;
+    const { files } = e.detail;
 
-    tempFiles.forEach((temp) => {
-      const name = this.getRandFileName(temp.path);
+    files.forEach((temp) => {
+      const name = this.getRandFileName(temp.url);
       originFiles1.push({
         name,
         type: 'image',
-        url: temp.path,
+        url: temp.url,
         size: temp.size,
       });
     });
@@ -100,13 +100,13 @@ Page({
     const { originFiles2 } = this.data;
 
     // 图片上传处理
-    const { tempFiles } = e.detail;
-    tempFiles.forEach((temp) => {
-      const name = this.getRandFileName(temp.path);
+    const { files } = e.detail;
+    files.forEach((temp) => {
+      const name = this.getRandFileName(temp.url);
       originFiles2.push({
         name,
         type: 'image',
-        url: temp.path,
+        url: temp.url,
         size: temp.size,
       });
     });

diff --git a/example/pages/upload/upload.wxml b/example/pages/upload/upload.wxml
@@ -7,9 +7,8 @@
       <view class="upload-wrapper">
         <t-upload
           media-type="{{['image']}}"
-          files="{{originFiles1}}"
+          defaultFiles="{{originFiles1}}"
           bind:remove="handleRemove"
-          bind:success="handleSuccess"
           gridConfig="{{gridConfig}}"
         >
           <t-icon slot="addContent" name="add" size="40rpx" color="rgba(0,0,0,0.26)" />

diff --git a/src/common/src/instantiationDecorator.ts b/src/common/src/instantiationDecorator.ts
@@ -98,15 +98,9 @@ export const toComponent = function toComponent(options: Record<string, any>) {
         const defaultKey = `default${key.replace(/^(\w)/, (m, m1) => m1.toUpperCase())}`;
 
         if (props[defaultKey] != null) {
-          const ans = {};
-          if (Array.isArray(props[key])) {
-            ans[key] = props[key].concat(detail[key]);
-          } else if (typeof props[key] === 'object') {
-            ans[key] = { ...props[key], ...detail[key] };
-          } else {
-            ans[key] = detail[key];
-          }
-          this.setData(ans);
+          this.setData({
+            [key]: detail[key],
+          });
         }
       }
       this.triggerEvent(evtName, detail, opts);

diff --git a/src/upload/README.md b/src/upload/README.md
@@ -65,4 +65,5 @@ size-limit | Number / Object | - | 图片文件大小限制，单位 KB。可选
 complete | - | 上传成功或失败后触发
 fail | - | 上传失败后触发
 remove | `(context: UploadRemoveContext)` | 移除文件时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。<br/>`interface UploadRemoveContext { index?: number; file?: UploadFile;}`<br/>
-success | `(context: MediaContext)` | 上传成功后触发，`context.tempFilePath` 表示选定视频的临时文件路径 (本地路径)。`context.duration` 表示选定视频的时间长度。`context.size`选定视频的数据量大小。更多描述参考 `wx.chooseMedia` 小程序官网描述。<br/>`interface MediaContext { tempFilePath?: string; duration?: number; size?: number; width?: number; height?: number; thumbTempFilePath?: string; fileType: string }`
+add | `(files: MediaContext[])` | 上传成功后触发，仅包含本次选择的照片；`context.url` 表示选定视频的临时文件路径 (本地路径)。`context.duration` 表示选定视频的时间长度。`context.size`选定视频的数据量大小。更多描述参考 `wx.chooseMedia` 小程序官网描述。<br/>`【type MediaContext = VideoContext | ImageContext】`<br/>`【interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }】【interface ImageSuccess { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }】`
+success | `(files: MediaContext[])` | 上传成功后触发，包含所有上传的文件；`context.url` 表示选定视频的临时文件路径 (本地路径)。`context.duration` 表示选定视频的时间长度。`context.size`选定视频的数据量大小。更多描述参考 `wx.chooseMedia` 小程序官网描述。<br/>`【type MediaContext = VideoContext | ImageContext】`<br/>`【interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }】【interface ImageSuccess { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }】`
diff --git a/src/upload/upload.ts b/src/upload/upload.ts
@@ -121,11 +121,14 @@ export default class Upload extends SuperComponent {
             name,
             type: 'image',
             url: temp.tempFilePath,
+            width: temp.width,
+            height: temp.height,
             size: temp.size,
             progress: 0,
           });
         });
-        this._trigger('success', { files });
+        this._trigger('add', { files });
+        this._trigger('success', { files: [...this.data.customFiles, ...files] });
         this.startUpload(files);
       },
       fail: (err) => {
@@ -156,10 +159,15 @@ export default class Upload extends SuperComponent {
             type: 'video',
             url: temp.tempFilePath,
             size: temp.size,
+            width: temp.width,
+            height: temp.height,
+            duration: temp.duration,
+            thumb: temp.thumbTempFilePath,
             progress: 0,
           });
         });
-        this._trigger('success', { files });
+        this._trigger('add', { files });
+        this._trigger('success', { files: [...this.data.customFiles, ...files] });
         this.startUpload(files);
       },
       fail: (err) => {