新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)小程序教程:微信小程序WeUI·Uploader
圖片上傳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'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī),默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
previewImage: function(e){
wx.previewImage({
current: e.currentTarget.id, // 當(dāng)前顯示圖片的http鏈接
urls: this.data.files // 需要預(yù)覽的圖片http鏈接列表
})
},
selectFile(files) {
console.log('files', files)
// 返回false可以阻止某次文件上傳
},
uplaodFile(files) {
console.log('upload files', files)
// 文件上傳的函數(shù),返回一個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)
}
});
屬性列表
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| ext-class | string | 否 | 添加在組件內(nèi)部結(jié)構(gòu)的class,可用于修改組件內(nèi)部的樣式 | |
| title | string | 否 | 組件標(biāo)題 | |
| tips | string | 否 | 組件的提示 | |
| delete | boolean | 是 | 是否顯示刪除按鈕 | |
| size-type | array | 是 | 和chooseImage的sizeType參數(shù)一樣 | |
| source-type | array | 是 | 和chooseImage的sourceType參數(shù)一樣 | |
| max-size | number | 5 * 1024 * 1024 | 是 | 圖片上傳的最大文件限制,默認(rèn)是5M |
| max-count | number | 1 | 否 | 圖片上傳的個數(shù)限制 |
| files | array | 否 | 當(dāng)前的圖片列表 | |
| select | function | 否 | 選擇圖片時的過濾函數(shù),返回true表示圖片有效 | |
| upload | function | 否 | 圖片上傳的函數(shù),返回Promise,Promise的callback里面必須resolve({urls})表示成功,否則表示失敗 | |
| bindselect | eventhandler | 否 | 圖片選擇觸發(fā)的事件,detail為{tempFilePaths, tempFiles, contents},其中tempFiles和tempFilePaths是chooseImage返回的字段,contents表示所選的圖片的二進(jìn)制Buffer列表 | |
| bindcancel | eventhandler | 否 | 取消圖片選擇的事件,detail為{} | |
| bindsuccess | eventhandler | 否 | 圖片上傳成功的事件,detail為{urls},urls為upload函數(shù)上傳成功返回的urls參數(shù) | |
| bindfail | eventhandler | 否 | 圖片上傳失敗的事件,detail為{type, errMsg},type為1表示圖片超過大小限制,type為2表示選擇圖片失敗,type為3表示圖片上傳失敗。 | |
| binddelete | eventhandler | 否 | 刪除圖片觸發(fā)的事件,detail為{index, item},index表示刪除的圖片的下標(biāo),item為圖片對象。 |
files表示當(dāng)前的圖片列表,每一項(xiàng)的定義為
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| url | string | 是 | 圖片鏈接 | |
| loading | boolean | 否 | 圖片上傳中 | |
| error | boolean | 否 | 圖片上傳失敗 |
文章名稱:創(chuàng)新互聯(lián)小程序教程:微信小程序WeUI·Uploader
本文地址:http://m.fisionsoft.com.cn/article/dhohjjd.html


咨詢
建站咨詢
