微信小程序upload封裝
磨刀不誤砍柴工。這節(jié)我們來封裝下圖片上傳，文件上傳類似。
wx.chooseImage(OBJECT)
上傳之前當(dāng)然要選上傳的文件。
小程序的上傳業(yè)務(wù)是這個(gè)樣的
-
wx.chooseImage選擇要上傳的文件，會生成對應(yīng)的臨時(shí)path
-
可以拿這些臨時(shí)path去上傳或者預(yù)覽。
wx.chooseImage提供的參數(shù)比較多：
| 參數(shù) | 類型 | 必填 | 說明 |
|---|---|---|---|
| count | Number | 否 | 最多可以選擇的圖片張數(shù)，默認(rèn)9 |
| sizeType | StringArray | 否 | original 原圖，compressed 壓縮圖，默認(rèn)二者都有 |
| sourceType | StringArray | 否 | album 從相冊選圖，camera 使用相機(jī)，默認(rèn)二者都有 |
| success | Function | 是 | 成功則返回圖片的本地文件路徑列表 tempFilePaths |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行） |
為了使用簡單點(diǎn)，我們先來封裝下wx.chooseImage：
chooseImage: function ({sizeType = ['compressed'], sourceType = ['album', 'camera'], count = 9}){
return new es6.Promise((resolve,reject)=>{
wx.chooseImage({
count: count, // 默認(rèn)9
sizeType: sizeType, // 可以指定是原圖還是壓縮圖，默認(rèn)壓縮圖
sourceType: sourceType, // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
resolve(res.tempFilePaths);
},
fail:function(error){
reject(error)
}
})
});
},
上面代碼我們默認(rèn)了，最多選{9}張，sizeType是{compressed}壓縮后的圖片,sourceType是{'album', 'camera'}相機(jī)和相冊。這樣我們就不用填任何參數(shù)，直接調(diào)用即可，就會使用默認(rèn)的這些參數(shù)。
如果你需要定制參數(shù)，比如需要上傳原圖。你只要參對應(yīng)參數(shù)即可，如：
chooseImage({sizeType:['original ']})
這樣就會覆蓋了默認(rèn)的參數(shù)。
注意：參數(shù)格式必須數(shù)組格式，因?yàn)橐獁x.chooseImage的參數(shù)格式對應(yīng)。
wx.uploadFile(OBJECT)
將本地資源上傳到開發(fā)者服務(wù)器，客戶端發(fā)起一個(gè) HTTPS POST 請求，其中 content-type 為 multipart/form-data 。
如頁面通過 wx.chooseImage 等接口獲取到一個(gè)本地資源的臨時(shí)文件路徑后，可通過此接口將本地資源上傳到指定服務(wù)器。
OBJECT參數(shù)說明：
| 參數(shù) | 類型 | 必填 | 說明 |
|---|---|---|---|
| url | String | 是 | 開發(fā)者服務(wù)器 url |
| filePath | String | 是 | 要上傳文件資源的路徑 |
| name | String | 是 | 文件對應(yīng)的 key , 開發(fā)者在服務(wù)器端通過這個(gè) key 可以獲取到文件二進(jìn)制內(nèi)容 |
| header | Object | 否 | HTTP 請求 Header, header 中不能設(shè)置 Referer |
| formData | Object | 否 | HTTP 請求中其他額外的 form data |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行） |
很明顯filePath為string，wx.uploadFile每次只能上傳一個(gè)文件。我們選了多張圖片，你卻只能一次上一個(gè)？
很明顯是小程序的框架還沒時(shí)間做到很完善。只是提供了基本的接口。其他豐富的就留回給開發(fā)者自己封裝開發(fā)。就像這篇文章。
所以這個(gè)的上傳是多文件上傳封裝。因?yàn)槎辔募蟼骷嫒輪挝募蟼?，單文件上傳只需?shù)組傳一個(gè)。上傳完拿結(jié)果數(shù)組的第一個(gè)即可。
uploadImage: function ({ files = [], name = 'file', formData = {}, header = {}, dir = '',url=config.uploadImageUrl}){
return new es6.Promise((resolve,reject)=>{
if (files && files instanceof Array && files.length>0){
var promiseList=[];
for (var i = 0; i < files.length;i++){
promiseList[i] = new es6.Promise((resolve, reject) => {
wx.uploadFile({
url: url + dir, //僅為示例，非真實(shí)的接口地址
filePath: files[i],
name: name,
formData: formData,
header: header,
success: function (res) {
resolve(res.data);
},
fail: function (error) {
reject(error);
}
})
});
}
es6.Promise.all(promiseList)
.then(function (result){
resolve(result);
})
.then(function(error){
reject(error);
})
}else{
reject('傳參有誤，請傳數(shù)組格式');
}
})
}
原理主要是每個(gè)請求按順序裝在一個(gè)數(shù)組里。然后用Promise.all批處理同時(shí)上傳，上傳后按照上傳時(shí)的順序返回結(jié)果。大家可以去看看es6的promise。
完整代碼如下：
import config from '../config.js'
import es6 from '../lib/es6-promise.min.js'
let upload={
chooseImage: function ({sizeType = ['compressed'], sourceType = ['album', 'camera'], count = 9}){
return new es6.Promise((resolve,reject)=>{
wx.chooseImage({
count: count, // 默認(rèn)9
sizeType: sizeType, // 可以指定是原圖還是壓縮圖，默認(rèn)壓縮圖
sourceType: sourceType, // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
resolve(res.tempFilePaths);
},
fail:function(error){
reject(error)
}
})
});
},
/**
* 以wx.request作為底層方法
* @param {arr} files 圖片url集合
* @param {String} url 圖片上傳接口地址
* @param {String} dir 上傳目錄地址
* @param {String} name 文件對應(yīng)的 key , 開發(fā)者在服務(wù)器端通過這個(gè) key 可以獲取到文件二進(jìn)制內(nèi)容
* @param {Object} header HTTP 請求 Header, header 中不能設(shè)置 Referer
* @param {Object} formData HTTP 請求中其他額外的 form data
*/
uploadImage: function ({ files = [], name = 'file', formData = {}, header = {}, dir = '',url=config.uploadImageUrl}){
return new es6.Promise((resolve,reject)=>{
if (files && files instanceof Array && files.length>0){
var promiseList=[];
for (var i = 0; i < files.length;i++){
promiseList[i] = new es6.Promise((resolve, reject) => {
wx.uploadFile({
url: url + dir, //僅為示例，非真實(shí)的接口地址
filePath: files[i],
name: name,
formData: formData,
header: header,
success: function (res) {
resolve(res.data);
},
fail: function (error) {
reject(error);
}
})
});
}
es6.Promise.all(promiseList)
.then(function (result){
resolve(result);
})
.then(function(error){
reject(error);
})
}else{
reject('傳參有誤，請傳數(shù)組格式');
}
})
}
}
export default upload;
使用
現(xiàn)在app.js全局引入：
import Upload from './untils/upload.js'
App({
onLaunch: function () {
//......
},
Upload:Upload,
})
然后就可以在page的每個(gè)頁面使用了：
const app = getApp()
app.Page({
data: {
},
onLoad: function () {
app.Upload.chooseImage({ sizeType: ['original', 'compressed'], count:2}).then(function(files){
app.Upload.uploadImage({'files':files}).then(function(result){
console.log(result);
});
});
}
});
是不是方便多了。
