uploader 上传

效果预览

如果/page/components-exp文件夹存在，且app.json中example分包配置存在时，在小程序开发者工具中输入以下命令进入预览页面。

wx.navigateTo({
  url: '/supermarket/pages/components-exp/uploader/index',
  complete() { console.log(arguments[0].errMsg) }
})

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "uploader": "@retailwe/ui-uploader/index"
}

代码演示

基础用法

<uploader
  media-type="{{['image']}}"
  add-text="选择图片"
  limit="9"
  img-size-limit="{{100*1024}}"
  bindchoose="onChoose"
  bindchoosefailed="onChooseFailed"
  binddelete="onDelete"
></uploader>

API

uploader Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | limit | 最多可上传图片数 | number | 9 | - | | files | 原有图片列表 | array | [] | - | | videoDuration | 视频最大录制长度 | number | 10 | - | | addIcon | 添加按钮icon | string | camera | - | | addText | 添加按钮文本 | string | 添加 | - | | mediaType | 支持上传的文件类型，图片或视频 | array | ['image', 'video'] | - | | sourceType | 文件获取方式，相册/相机，详细请参考小程序官方文档 | array | ['album', 'camera'] | - | | sizeType | 文件大小，详细请参考小程序官方文档 | array | ['original', 'compressed'] | - | | ImgSizeLimit | 图片文件大小限制 | number | 0 | - | | videoSizeLimit | 视频文件大小限制 | number | 0 | - |

files的结构 | path | 文件url/路径 | string | - | - | | size | 文件大小 | string | - | - |

uploader Event

| 事件名 | 说明 | 参数 | |------|------|------| | choose | 选择文件后触发 | 本次选择的文件列表，形如：[{files: path: '', size: 0}] | | choosefailed | 文件选择失败/取消文件选择时触发 | err，错误原因 | | delete | 删除已选文件时触发，返回被删除文件的索引 | {index} |

uploader 外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 控件每一项根节点样式类 |