微信小程序 WeUI·Uploader
图片上传Uploader组件。
示例代码：
{
"usingComponents": {
"mp-uploader": "../components/uploader/uploader",
"mp-cells": "../components/cells/cells",
"mp-cell": "../components/cell/cell"
},
"navigationBarTitleText": "UI组件库"
}<view class="page">
<view class="page__hd">
<view class="page__title">Uploader</view>
<view class="page__desc">上传组件</view>
</view>
<view class="page__bd">
<mp-cells>
<mp-cell>
<mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="5" title="图片上传" tips="图片上传提示"></mp-uploader>
</mp-cell>
</mp-cells>
</view>
</view>Page({
data: {
files: [{
url: 'http://mmbiz.qpic.cn/mmbiz_png/VUIF3v9blLsicfV8ysC76e9fZzWgy8YJ2bQO58p43Lib8ncGXmuyibLY7O3hia8sWv25KCibQb7MbJW3Q7xibNzfRN7A/0',
}, {
loading: true
}, {
error: true
}]
},
onLoad() {
this.setData({
selectFile: this.selectFile.bind(this),
uplaodFile: this.uplaodFile.bind(this)
})
},
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
previewImage: function(e){
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files // 需要预览的图片http链接列表
})
},
selectFile(files) {
console.log('files', files)
// 返回false可以阻止某次文件上传
},
uplaodFile(files) {
console.log('upload files', files)
// 文件上传的函数，返回一个promise
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('some error')
}, 1000)
})
},
uploadError(e) {
console.log('upload error', e.detail)
},
uploadSuccess(e) {
console.log('upload success', e.detail)
}
});
属性列表
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| ext-class | string | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | |
| title | string | 否 | 组件标题 | |
| tips | string | 否 | 组件的提示 | |
| delete | boolean | 是 | 是否显示删除按钮 | |
| size-type | array | 是 | 和chooseImage的sizeType参数一样 | |
| source-type | array | 是 | 和chooseImage的sourceType参数一样 | |
| max-size | number | 5 * 1024 * 1024 | 是 | 图片上传的最大文件限制，默认是5M |
| max-count | number | 1 | 否 | 图片上传的个数限制 |
| files | array<object> | 否 | 当前的图片列表 | |
| select | function | 否 | 选择图片时的过滤函数，返回true表示图片有效 | |
| upload | function | 否 | 图片上传的函数，返回Promise，Promise的callback里面必须resolve({urls})表示成功，否则表示失败 | |
| bindselect | eventhandler | 否 | 图片选择触发的事件，detail为{tempFilePaths, tempFiles, contents},其中tempFiles和tempFilePaths是chooseImage返回的字段，contents表示所选的图片的二进制Buffer列表 | |
| bindcancel | eventhandler | 否 | 取消图片选择的事件，detail为{} | |
| bindsuccess | eventhandler | 否 | 图片上传成功的事件，detail为{urls}，urls为upload函数上传成功返回的urls参数 | |
| bindfail | eventhandler | 否 | 图片上传失败的事件，detail为{type, errMsg}，type为1表示图片超过大小限制，type为2表示选择图片失败，type为3表示图片上传失败。 | |
| binddelete | eventhandler | 否 | 删除图片触发的事件，detail为{index, item}，index表示删除的图片的下标，item为图片对象。 |
files表示当前的图片列表，每一项的定义为
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| url | string | 是 | 图片链接 | |
| loading | boolean | 否 | 图片上传中 | |
| error | boolean | 否 | 图片上传失败 |