图片上传Uploader组件。

示例代码：{

"usingComponents": {

"mp-uploader": "../components/uploader/uploader",

"mp-cells": "../components/cells/cells",

"mp-cell": "../components/cell/cell"

},

"navigationBarTitleText": "UI组件库"

}

Uploader

上传组件

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-classstring否添加在组件内部结构的class，可用于修改组件内部的样式

titlestring否组件标题

tipsstring否组件的提示

deleteboolean是是否显示删除按钮

size-typearray是和chooseImage的sizeType参数一样

source-typearray是和chooseImage的sourceType参数一样

max-sizenumber5 * 1024 * 1024是图片上传的最大文件限制，默认是5M

max-countnumber1否图片上传的个数限制

filesarray否当前的图片列表

selectfunction否选择图片时的过滤函数，返回true表示图片有效

uploadfunction否图片上传的函数，返回Promise，Promise的callback里面必须resolve({urls})表示成功，否则表示失败

bindselecteventhandler否图片选择触发的事件，detail为{tempFilePaths, tempFiles, contents},其中tempFiles和tempFilePaths是chooseImage返回的字段，contents表示所选的图片的二进制Buffer列表

bindcanceleventhandler否取消图片选择的事件，detail为{}

bindsuccesseventhandler否图片上传成功的事件，detail为{urls}，urls为upload函数上传成功返回的urls参数

bindfaileventhandler否图片上传失败的事件，detail为{type, errMsg}，type为1表示图片超过大小限制，type为2表示选择图片失败，type为3表示图片上传失败。

binddeleteeventhandler否删除图片触发的事件，detail为{index, item}，index表示删除的图片的下标，item为图片对象。

files表示当前的图片列表，每一项的定义为属性类型默认值必填说明urlstring是图片链接

loadingboolean否图片上传中

errorboolean否图片上传失败