微信小程式多圖片上傳
阿新 • • 發佈:2018-12-14
小程式多圖片上傳
檔案上傳 微信小程式官方文件
這裡為了方便使用,對 小程式檔案上傳的函式進行了 再次的封裝;同時為了方便記憶,是和使用,按照微信給出的文件進行編寫;
先看一下怎麼使用吧!
// 選擇照片
wx.chooseImage({
success: function(res) {
console.log(res, app.util.url('applet_img_upload'));
// 這裡把地址 和 上傳照片,都放在了一個 util.js 中
// 在 app.js 中 util: requier('utils/util.js')
app. util.uploadFile({
url: app.util.url('applet_img_upload'),
filePath: res.tempFilePaths, // 也可以傳單張 res.tempFilePaths[0],這樣好像 多此一舉了
name: 'image', // 具有預設值,可寫可不寫
success: e => {
console.log(e);
},
fail: err => {
console.log(err);
}
})
} ,
})
這裡把該函式放到了 util.js 中;放到其他地方也是可以的;
/*
* @param {Object}
* upImageFile({url: 'test.com', filePath: ['1.png', '2.png'], name: 'image', success: res => {}, fail: err => {} })
*/
// i 記錄當前上傳的圖片 fileUrl 圖片上傳後的地址 err 記錄上傳失敗,或錯誤次數
uploadFile: function (obj, i = 0, fileUrl = [], err = 0) {
// 有時也可能會直接上傳單張圖片
if (typeof obj.filePath === 'string') obj.filePath = [obj.filePath];
wx.uploadFile({
url: obj.url, // 接收圖片的地址
filePath: obj.filePath[i], // 圖片的臨時路徑,由微信返回
name: obj.name || "image", // 對應的 key,這裡設定預設 image
success: res => {
var resData = res.data;
// 異常處理,有時後臺返回的資料可能會有點問題,這個看需求寫
try {
resData = JSON.parse(resData);
}
catch (err) {
resData = JSON.parse(resData.substring(1));
}
if (resData.ec === 200) { // 判斷上傳是否成功,根據後臺返回的狀態判定,這裡需要根據你自己後臺返回的狀態去判斷
i++;
fileUrl.push(resData.data.path); // 後臺返回圖片路徑
// 如果都上傳完畢 直接 執行 success
if (i === obj.filePath.length) {
if (obj.success) obj.success({ msg: 'uploadFile:ok', data: fileUrl, statusCode: res.statusCode });
}
// 如果沒有完成 則繼續呼叫該函式
else {
this.uploadFile(obj, i, fileUrl);
}
}
else {
// 如果沒有失敗,記錄上傳失敗次數,我這裡定義上傳 失敗 3次結束執行上傳,返回失敗結果,執行 fail;後續如果有需求,這塊你也可以改成動態的
err++;
if (err <= 3) this.uploadFile(obj, i, fileUrl, err);
else {
console.log('%c 返回資訊:', 'color: #f00', resData)
console.log('%c 請注意: 請求成功時,後臺返回的資訊可能與此函式中的配置不一致,注意修改', 'color: blue');
}
}
},
fail: err => {
// 上傳失敗執行,同上
err++;
if (err <= 3) this.uploadFile(obj, i, fileUrl, err);
else {
var errObj = { err, i, fileUrl };
if (obj.fail) obj.fail(errObj);
console.log('%c 圖片上傳失敗,請注意檢查...', 'color: #f00', errObj);
}
}
})
}
T.T