@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/upload/README.md

@@ -0,0 +1,116 @@
+---
+title: Upload 上传
+description: 用于相册读取或拉起拍照的图片上传功能。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TUpload from '@tdesign/uniapp/upload/upload.vue';
+```
+
+### 单选上传图片
+
+图片上传有两种方式：
+
+1 选择完所有图片之后，统一上传，因此选择完就直接展示
+
+2 每次选择图片都上传，展示每次上传图片的进度
+
+{{ single }}
+
+### 多选上传图片
+
+{{ multiple }}
+
+### 长按拖拽排序图片
+
+{{ drag }}
+
+### 加载状态
+
+支持多种状态：`loading`、`reload`、`failed`；
+
+其中 `loading` 还可以通过传入 `percent` 来区分是否展示进度。
+
+{{ status }}
+
+### 从聊天记录上选
+
+使用 `wx.chooseMessageFile` 实现，需要基础版本库 `2.5.0+`
+
+{{ messageFile }}
+
+## FAQ
+
+### 为什么 `Upload` 外层使用 `display: flex` 时会造成组件样式混乱？
+
+`Upload` 是基于 `TGrid` 宫格实现，当外层使用 `display: flex` ，子元素会默认加上 `flex-grow: 0`，造成 `Upload` 组件整体宽度不足。可以通过给 `Upload` 组件节点加上 `flex-grow: 1` 处理。
+ 
+
+## API
+
+### Upload Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+add-btn | Boolean | true | 添加按钮 | N
+add-content | String | - | 添加按钮内容 | N
+allow-upload-duplicate-file | Boolean | false | 是否允许重复上传相同文件名的文件 | N
+config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/upload/type.ts) | N
+disabled | Boolean | undefined | 是否禁用组件 | N
+draggable | Boolean / Object | - | 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }`。TS 类型：`boolean \| {vibrate?: boolean; collisionVibrate?: boolean}` | N
+files | Array | - | 已上传文件列表。支持语法糖 `v-model:files`。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/upload/type.ts) | N
+default-files | Array | - | 已上传文件列表。非受控属性。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/upload/type.ts) | N
+grid-config | Object | - | upload组件每行上传图片列数以及图片的宽度和高度。TS 类型：`{column?: number;  width?: number; height?: number;}` | N
+gutter | Number | 16 | 预览窗格的 `gutter` 大小，单位 rpx | N
+image-props | Object | - | 透传 Image 组件全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/upload/type.ts) | N
+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/packages/uniapp-components/upload/type.ts) | N
+preview | Boolean | true | 是否支持图片预览，文件没有预览 | N
+remove-btn | Boolean | true | 移除按钮 | N
+request-method | Function | - | 自定义上传方法。TS 类型：`any` | 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/packages/uniapp-components/upload/type.ts) | N
+source | String | media | 来源。可选项：media/messageFile | N
+transition | Object | `{backTransition: true, duration: 300, timingFunction: 'ease'}` | 拖拽位置移动时的过渡参数,`duration`单位为ms。TS 类型：`Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/upload/type.ts) | N
+
+### Upload Events
+
+名称 | 参数 | 描述
+-- | -- | --
+add | `(context: { files: MediaContext })` | 选择后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+click | `(context: { index: number; file: VideoContext \| ImageContext })` | 点击已选文件时触发；常用于重新上传
+complete | \- | 上传成功或失败后触发
+drop | `(context: { files: MediaContext }) ` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+fail | \- | 上传失败后触发
+remove | `(context: { index: number; file: UploadFile })` | 移除文件时触发
+select-change | `(context: { files: MediaContext[]; currentSelectedFiles: MediaContext[] })` | 选择文件或图片之后，上传之前，触发该事件。<br />`files` 表示之前已经上传完成的文件列表。<br />`currentSelectedFiles` 表示本次上传选中的文件列表
+success | `(context: { files: MediaContext })` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
+
+### Upload Slots
+
+名称 | 描述
+-- | --
+add-content | 自定义 `add-content` 显示内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-upload-add-bg-color | @bg-color-secondarycontainer | -
+--td-upload-add-color | @text-color-placeholder | -
+--td-upload-add-disabled-bg-color | @bg-color-component-disabled | -
+--td-upload-add-icon-disabled-color | @text-color-disabled | -
+--td-upload-add-icon-size | 56rpx | -
+--td-upload-disabled-mask | rgba(0, 0.6) | -
+--td-upload-drag-transition-duration | --td-upload-drag-transition-duration | -
+--td-upload-drag-transition-timing-function | --td-upload-drag-transition-timing-function | -
+--td-upload-drag-z-index | 999 | -
+--td-upload-radius | @radius-default | -

package/dist/upload/drag.computed.js

@@ -0,0 +1,227 @@
+/* eslint-disable no-plusplus */
+let classPrefix = '';
+let startIndex = 0;
+let endIndex = 0;
+let dragCollisionList = [];
+
+const isOutRange = function (x1, y1, x2, y2, x3, y3) {
+  return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3;
+};
+
+const sortCore = function (sKey, eKey, st) {
+  const _ = st.dragBaseData;
+
+  const excludeFix = function (cKey, type) {
+    if (st.list[cKey].fixed) {
+      // fixed 元素位置不会变化, 这里直接用 cKey(sortKey) 获取, 更加快捷
+      type ? --cKey : ++cKey;
+      return excludeFix(cKey, type);
+    }
+    return cKey;
+  };
+
+  // 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改
+  let endRealKey = -1;
+  st.list.forEach((item) => {
+    if (item.sortKey === eKey) endRealKey = item.realKey;
+  });
+
+  return st.list.map((item) => {
+    if (item.fixed) return item;
+    let cKey = item.sortKey;
+    let rKey = item.realKey;
+
+    if (sKey < eKey) {
+      // 正序拖动
+      if (cKey > sKey && cKey <= eKey) {
+        --rKey;
+        cKey = excludeFix(--cKey, true);
+      } else if (cKey === sKey) {
+        rKey = endRealKey;
+        cKey = eKey;
+      }
+    } else if (sKey > eKey) {
+      // 倒序拖动
+      if (cKey >= eKey && cKey < sKey) {
+        ++rKey;
+        cKey = excludeFix(++cKey, false);
+      } else if (cKey === sKey) {
+        rKey = endRealKey;
+        cKey = eKey;
+      }
+    }
+
+    if (item.sortKey !== cKey) {
+      item.tranX = `${(cKey % _.columns) * 100}%`;
+      item.tranY = `${Math.floor(cKey / _.columns) * 100}%`;
+      item.sortKey = cKey;
+      item.realKey = rKey;
+    }
+    return item;
+  });
+};
+
+function triggerCustomEvent(list, type, ins) {
+  const _list = [];
+  const listData = [];
+
+  list.forEach((item) => {
+    _list[item.sortKey] = item;
+  });
+
+  _list.forEach((item) => {
+    if (!item.extraNode) {
+      listData.push(item.data);
+    }
+  });
+
+  ins.$emit(type, { listData });
+}
+
+export function longPress(event, index) {
+  const st = this.getState();
+  const _ = st.dragBaseData;
+
+  const sTouch = event.changedTouches[0];
+  if (!sTouch) return;
+
+  st.cur = index;
+
+  // compile error
+  // longPressIndex = st.cur;
+
+  // 初始项是固定项则返回
+  const item = st.list[st.cur];
+  if (item && item.fixed) return;
+
+  // 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果
+  if (st.dragging) return;
+  st.dragging = true;
+  this.callMethod('dragStatusChange', { dragging: true });
+
+  // 计算X,Y轴初始位移, 使 item 中心移动到点击处, 单列时候X轴初始不做位移
+  st.tranX = _.columns === 1 ? 0 : sTouch.pageX - (_.itemWidth / 2 + _.wrapLeft);
+  st.tranY = sTouch.pageY - (_.itemHeight / 2 + _.wrapTop);
+  st.sId = sTouch.identifier;
+  this.setDragItemStyle(index, `transform: translate3d(${st.tranX}px, ${st.tranY}px, 0)`);
+
+  st.list.forEach((item, index) => {
+    this.setDragItemClass(index, 'remove', [`${classPrefix}__drag--tran`, `${classPrefix}__drag--cur`]);
+    this.setDragItemClass(index, 'add', index === st.cur ? `${classPrefix}__drag--cur` : `${classPrefix}__drag--tran`);
+  });
+  this.callMethod('dragVibrate', { vibrateType: 'longPress' });
+}
+
+export function touchMove(event, index) {
+  // const ins = event.instance;
+  const st = this.getState();
+  const _ = st.dragBaseData;
+
+  const mTouch = event.changedTouches[0];
+  if (!mTouch) return;
+
+  if (!st.dragging) return;
+
+  // 如果不是同一个触发点则返回
+  if (st.sId !== mTouch.identifier) return;
+
+  // 计算X,Y轴位移, 单列时候X轴初始不做位移
+  const tranX = _.columns === 1 ? 0 : mTouch.pageX - (_.itemWidth / 2 + _.wrapLeft);
+  const tranY = mTouch.pageY - (_.itemHeight / 2 + _.wrapTop);
+
+  // 到顶到底自动滑动
+  if (mTouch.clientY > _.windowHeight - _.itemHeight - _.realBottomSize) {
+    // 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度)
+    this.callMethod('pageScroll', {
+      scrollTop: mTouch.pageY + _.itemHeight - (_.windowHeight - _.realBottomSize),
+    });
+  } else if (mTouch.clientY < _.itemHeight + _.realTopSize) {
+    // 当前触摸点pageY - item高度 - 顶部固定区域高度
+    this.callMethod('pageScroll', {
+      scrollTop: mTouch.pageY - _.itemHeight - _.realTopSize,
+    });
+  }
+
+  // 设置当前激活元素偏移量
+  this.setDragItemStyle(index, `transform: translate3d(${tranX}px, ${tranY}px, 0)`);
+
+  const startKey = st.list[st.cur].sortKey;
+  const curX = Math.round(tranX / _.itemWidth);
+  const curY = Math.round(tranY / _.itemHeight);
+  const endKey = curX + _.columns * curY;
+
+  // 目标项是固定项则返回
+  const item = st.list[endKey];
+  if (item && item.fixed) return;
+
+  // X轴或Y轴超出范围则返回
+  if (isOutRange(curX, _.columns, curY, _.rows, endKey, st.list.length)) return;
+
+  // 防止拖拽过程中发生乱序问题
+  if (startKey === endKey || startKey === st.preStartKey) return;
+  st.preStartKey = startKey;
+
+  dragCollisionList = sortCore(startKey, endKey, st);
+  startIndex = startKey;
+  endIndex = endKey;
+  st.list.forEach((_, index) => {
+    const item = dragCollisionList[index];
+    if (index !== st.cur) {
+      this.setDragItemStyle(index, `transform: translate3d(${item.tranX},${item.tranY}, 0)`);
+    }
+  });
+
+  this.callMethod('dragVibrate', { vibrateType: 'touchMove' });
+  this.callMethod('dragCollision', {
+    dragCollisionList,
+    startIndex,
+    endIndex,
+  });
+  triggerCustomEvent(dragCollisionList, 'change', this);
+}
+
+export function touchEnd(event, index) {
+  const st = this.getState();
+
+  if (!st.dragging) return;
+  triggerCustomEvent(st.list, 'sortend', this);
+
+  this.setDragItemClass(index, 'remove', `${classPrefix}__drag--cur`);
+  this.setDragItemClass(index, 'add', `${classPrefix}__drag--tran`);
+
+  this.setDragItemStyle(index, `transform: translate3d(${st.list[st.cur].tranX},${st.list[st.cur].tranY}, 0)`);
+
+  st.preStartKey = -1;
+  st.dragging = false;
+  this.callMethod('dragStatusChange', { dragging: false });
+  this.callMethod('dragEnd', {
+    dragCollisionList,
+    startIndex,
+    endIndex,
+  });
+  st.cur = -1;
+  st.tranX = 0;
+  st.tranY = 0;
+}
+
+export function baseDataObserver(newVal) {
+  if (newVal === undefined) return;
+
+  const st = this.getState();
+  st.dragBaseData = newVal;
+  classPrefix = newVal.classPrefix;
+}
+
+export function listObserver(newVal) {
+  if (newVal === undefined) return;
+
+  const st = this.getState();
+
+  st.list = newVal || [];
+  st.list.forEach((item, index) => {
+    this.setDragItemClass(index, 'remove', `${classPrefix}__drag--tran`);
+    this.setDragItemStyle(index,  `transform: translate3d(${item.tranX},${item.tranY}, 0)`);
+    if (item.fixed) this.setDragItemClass(index, 'add', `${classPrefix}__drag--fixed`);
+  });
+  dragCollisionList = [];
+}

package/dist/upload/props.ts

@@ -0,0 +1,136 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdUploadProps } from './type';
+export default {
+  /** 添加按钮 */
+  addBtn: {
+    type: Boolean,
+    default: true,
+  },
+  /** 添加按钮内容 */
+  addContent: {
+    type: String,
+  },
+  /** 是否允许重复上传相同文件名的文件 */
+  allowUploadDuplicateFile: Boolean,
+  /** 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html) */
+  config: {
+    type: Object,
+  },
+  /** 是否禁用组件 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }` */
+  draggable: {
+    type: [Boolean, Object],
+  },
+  /** 已上传文件列表 */
+  files: {
+    type: Array,
+  },
+  /** 已上传文件列表，非受控属性 */
+  defaultFiles: {
+    type: Array,
+  },
+  /** upload组件每行上传图片列数以及图片的宽度和高度 */
+  gridConfig: {
+    type: Object,
+  },
+  /** 预览窗格的 `gutter` 大小，单位 rpx */
+  gutter: {
+    type: Number,
+    default: 16,
+  },
+  /** 透传 Image 组件全部属性 */
+  imageProps: {
+    type: Object,
+  },
+  /** 用于控制文件上传数量，值为 0 则不限制 */
+  max: {
+    type: Number,
+    default: 0,
+  },
+  /** 支持上传的文件类型，图片或视频 */
+  mediaType: {
+    type: Array,
+    default: () => ['image', 'video'],
+  },
+  /** 是否支持图片预览，文件没有预览 */
+  preview: {
+    type: Boolean,
+    default: true,
+  },
+  /** 移除按钮 */
+  removeBtn: {
+    type: Boolean,
+    default: true,
+  },
+  /** 自定义上传方法 */
+  requestMethod: {
+    type: Function,
+  },
+  /** 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` */
+  sizeLimit: {
+    type: [Number, Object],
+  },
+  /** 来源 */
+  source: {
+    type: String,
+    default: 'media' as TdUploadProps['source'],
+    validator(val: TdUploadProps['source']): boolean {
+      if (!val) return true;
+      return ['media', 'messageFile'].includes(val);
+    },
+  },
+  /** 拖拽位置移动时的过渡参数,`duration`单位为ms */
+  transition: {
+    type: Object,
+    default: () => ({ backTransition: true, duration: 300, timingFunction: 'ease' }),
+  },
+  /** 选择后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述 */
+  onAdd: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击已选文件时触发；常用于重新上传 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 上传成功或失败后触发 */
+  onComplete: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述 */
+  onDrop: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 上传失败后触发 */
+  onFail: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 移除文件时触发 */
+  onRemove: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选择文件或图片之后，上传之前，触发该事件。<br />`files` 表示之前已经上传完成的文件列表。<br />`currentSelectedFiles` 表示本次上传选中的文件列表 */
+  onSelectChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述 */
+  onSuccess: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/upload/type.ts

@@ -0,0 +1,197 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdImageProps as ImageProps } from '../image/type';
+
+export interface TdUploadProps {
+  /**
+   * 添加按钮
+   * @default true
+   */
+  addBtn?: boolean;
+  /**
+   * 添加按钮内容
+   */
+  addContent?: string;
+  /**
+   * 是否允许重复上传相同文件名的文件
+   * @default false
+   */
+  allowUploadDuplicateFile?: boolean;
+  /**
+   * 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)
+   */
+  config?: UploadMpConfig;
+  /**
+   * 是否禁用组件
+   */
+  disabled?: boolean;
+  /**
+   * 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }`
+   */
+  draggable?: boolean | { vibrate?: boolean; collisionVibrate?: boolean };
+  /**
+   * 已上传文件列表
+   */
+  files?: Array<UploadFile>;
+  /**
+   * 已上传文件列表，非受控属性
+   */
+  defaultFiles?: Array<UploadFile>;
+  /**
+   * upload组件每行上传图片列数以及图片的宽度和高度
+   */
+  gridConfig?: { column?: number; width?: number; height?: number };
+  /**
+   * 预览窗格的 `gutter` 大小，单位 rpx
+   * @default 16
+   */
+  gutter?: number;
+  /**
+   * 透传 Image 组件全部属性
+   */
+  imageProps?: ImageProps;
+  /**
+   * 用于控制文件上传数量，值为 0 则不限制
+   * @default 0
+   */
+  max?: number;
+  /**
+   * 支持上传的文件类型，图片或视频
+   * @default ['image', 'video']
+   */
+  mediaType?: Array<MediaType>;
+  /**
+   * 是否支持图片预览，文件没有预览
+   * @default true
+   */
+  preview?: boolean;
+  /**
+   * 移除按钮
+   * @default true
+   */
+  removeBtn?: boolean;
+  /**
+   * 自定义上传方法
+   */
+  requestMethod?: any;
+  /**
+   * 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`
+   */
+  sizeLimit?: number | SizeLimitObj;
+  /**
+   * 来源
+   * @default media
+   */
+  source?: 'media' | 'messageFile';
+  /**
+   * 拖拽位置移动时的过渡参数,`duration`单位为ms
+   * @default `{backTransition: true, duration: 300, timingFunction: 'ease'}`
+   */
+  transition?: Transition;
+  /**
+   * 选择后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+   */
+  onAdd?: (context: { files: MediaContext }) => void;
+  /**
+   * 点击已选文件时触发；常用于重新上传
+   */
+  onClick?: (context: { index: number; file: VideoContext | ImageContext }) => void;
+  /**
+   * 上传成功或失败后触发
+   */
+  onComplete?: () => void;
+  /**
+   * 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+   */
+  onDrop?: (context: { files: MediaContext }) => void;
+  /**
+   * 上传失败后触发
+   */
+  onFail?: () => void;
+  /**
+   * 移除文件时触发
+   */
+  onRemove?: (context: { index: number; file: UploadFile }) => void;
+  /**
+   * 选择文件或图片之后，上传之前，触发该事件。<br />`files` 表示之前已经上传完成的文件列表。<br />`currentSelectedFiles` 表示本次上传选中的文件列表
+   */
+  onSelectChange?: (context: { files: MediaContext[]; currentSelectedFiles: MediaContext[] }) => void;
+  /**
+   * 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+   */
+  onSuccess?: (context: { files: MediaContext }) => void;
+}
+
+export type UploadMpConfig = ImageConfig | VideoConfig;
+
+export interface ImageConfig {
+  count?: number;
+  sizeType?: Array<SizeTypeValues>;
+  sourceType?: Array<SourceTypeValues>;
+}
+
+export type SizeTypeValues = 'original' | 'compressed';
+
+export type SourceTypeValues = 'album' | 'camera';
+
+export interface VideoConfig {
+  sourceType?: Array<SourceTypeValues>;
+  compressed?: boolean;
+  maxDuration?: number;
+  camera?: 'back' | 'front';
+}
+
+export interface UploadFile {
+  url: string;
+  name?: string;
+  size?: number;
+  type?: 'image' | 'video';
+  percent?: number;
+  status: 'loading' | 'reload' | 'failed' | 'done';
+}
+
+export type MediaType = 'image' | 'video';
+
+export interface SizeLimitObj {
+  size: number;
+  unit: SizeUnit;
+  message?: string;
+}
+
+export type SizeUnitArray = ['B', 'KB', 'MB', 'GB'];
+
+export type SizeUnit = SizeUnitArray[number];
+
+export interface Transition {
+  backTransition?: boolean;
+  duration?: number;
+  timingFunction?: string;
+}
+
+export type MediaContext = VideoContext[] | ImageContext[];
+
+export interface VideoContext {
+  name?: string;
+  type?: string;
+  url?: string;
+  duration?: number;
+  size?: number;
+  width?: number;
+  height?: number;
+  thumb: string;
+  progress: number;
+}
+
+export interface ImageContext {
+  name: string;
+  type: string;
+  url: string;
+  size: number;
+  width: number;
+  height: number;
+  progress: number;
+}

package/dist/upload/upload.computed.js

@@ -0,0 +1,13 @@
+export function getWrapperAriaRole(file) {
+  return file.status && file.status != 'done' ? 'text' : 'button';
+}
+
+export function getWrapperAriaLabel(file) {
+  if (file.status && file.status != 'done') {
+    if (file.status == 'loading') {
+      return file.percent ? `上传中:${file.percent}%` : '上传中';
+    }
+    return file.status == 'reload' ? '重新上传' : '上传失败';
+  }
+  return file.type === 'video' ? '视频' : '图像';
+}