簡(jiǎn)介：本章主要記錄微信小程序圖片上傳功能的實(shí)現(xiàn)過程，以及開發(fā)過程中遇到的問題（菜鳥日記）猎拨，主要分為:4個(gè)part
p1：wx.chooseImage 從本地相冊(cè)選擇圖片或使用相機(jī)拍照
p2：wx.uploadFile 將本地資源上傳到服務(wù)器
p3：提交圖片鏈接（有時(shí)候包含其他頁面參數(shù)）
p4：附加圖片預(yù)覽和長(zhǎng)按刪除
步驟一：wx.chooseImage
圖片上傳第一步首先是選擇圖片膀藐，微信小程序?yàn)槲覀兲峁┝藈x.chooseImage方法，活不多說先上文檔示例（點(diǎn)我查看官方文檔）：
文檔里有所有參數(shù)的對(duì)應(yīng)解釋红省，在這里我只介紹常用的幾個(gè)额各，大家對(duì)照?qǐng)D片來看比較清晰明了
1. count：每次最多可以選擇的圖片張數(shù)，默認(rèn)為9張
2. sizeType：所選的圖片的尺寸—>original（原圖）—>compressed（壓縮圖）
3. sourceType：圖片來源—>album（從相冊(cè)選圖）—>camera（使用相機(jī)拍照）
4. res.tempFilePaths：文件本地路徑
5. res.tempFiles：圖片的本地臨時(shí)文件列表吧恃，包含圖片路徑path和圖片大小size虾啦，單位為B
在success回調(diào)里就可以執(zhí)行我們的下一步啦！
步驟二：wx.uploadFile
這一步主要是在拿到圖片的本地臨時(shí)路徑后傳給后臺(tái)痕寓，獲取到新的圖片地址（點(diǎn)我查看官方文檔）
還是先來看幾個(gè)參數(shù)說明：
1. url：服務(wù)器地址傲醉，就是傳圖片的接口
2. filePath：要上傳文件資源的路徑 (本地路徑)，不明白的童鞋往上翻呻率，看tempFilePaths硬毕，tempFiles
3. name：文件對(duì)應(yīng)的 key，也就是后臺(tái)接收?qǐng)D片路徑的字段名
4. formData：HTTP 請(qǐng)求中其他額外的form data
在實(shí)際項(xiàng)目中我們會(huì)涉及到多張圖片上傳礼仗，網(wǎng)上已經(jīng)有大神用遞歸的方法對(duì)上傳做了封裝吐咳，我就不獻(xiàn)丑了，直接把鏈接粘在這里：小程序wx.uploadFile上傳問題
在使用這個(gè)方法的過程中我遇到了一個(gè)問題元践，就是當(dāng)我上傳多張的時(shí)候總是只顯示一張圖片挪丢，這是怎么回事呢？在我一番查找后發(fā)現(xiàn)原來是因?yàn)槊看螆?zhí)行上傳方法都會(huì)創(chuàng)建新的Promise對(duì)象卢厂，導(dǎo)致我們的數(shù)據(jù)不能連接起來乾蓬，原文我找不到了，給大家貼個(gè)我的代碼好了
uploadModal(filePaths, successUp, failUp, i, length) {
let that = this;
let upload = new Promise(function (resolve, reject) {
function timeout(filePaths, successUp, failUp, i, length) {
wx.uploadFile({url: xxxx,//(填自己的接口地址就可以)
filePath: filePaths[i],
name: 'multipartFile',
formData: {},
success: (res) => {
successUp++;
var data = JSON.parse(res.data);
},
fail: (res) => {
failUp++;
},
complete: () => {
i++;
if (i == length) {
wx.showToast({
title: successUp + '張上傳成功,' + failUp + '張上傳失斏骱恪任内！',
icon: 'none',
duration: 2000,
mask: true
})
resolve();
} else { //遞歸調(diào)用uploadDIY函數(shù)
timeout(filePaths, successUp, failUp, i, length);
}
},
});
};
timeout(filePaths, successUp, failUp, i, length)
})
return upload;
},
在wx.uploadFile外層套了一個(gè)timeout方法撵渡，遞歸調(diào)用的時(shí)候就調(diào)它好啦，成功解決死嗦！感謝那位不知名的大神
步驟三：提交圖片鏈接
因?yàn)槲以谔峤粓D片的時(shí)候也要提交一些別的參數(shù)趋距，所以我就寫了個(gè)一個(gè)submit方法來處理圖片鏈接和其他params，我用wx.request方法來提交越除，這個(gè)大家都懂节腐，我就不廢話了
附加小方法：預(yù)覽和刪除
圖片預(yù)覽（點(diǎn)我查看官方文檔）
previewImg(e) {
let url = e.currentTarget.dataset.url;
wx.previewImage({
current: url,
urls: this.data.imgs
})
},
長(zhǎng)按刪除
//js部分
deleteImage(e) {
let that = this;
let imgs = that.data.imgs;
let index = e.currentTarget.dataset.index;
wx.showModal({
title: '提示',
content: '確定要?jiǎng)h除此圖片嗎？',
success: function (res) {
if (res.confirm) {
imgs.splice(index, 1);
}
that.setData({
imgs
});
}
})
},
<!-- 圖片是循環(huán)出來的所以寫了item -->
<image src="{{item}}" bindtap="previewImg" bindlongpress="deleteImage" data-url="{{item}}" data-index="{{index}}"></image>
完結(jié)~~~
第一次寫文章求鼓勵(lì)摘盆！喜歡的幫我點(diǎn)個(gè)贊哦翼雀，不明白的地方可以留言，我寫的不對(duì)的地方請(qǐng)大佬們指教孩擂，我會(huì)改的狼渊，畢竟我只是個(gè)小菜鳥（掩面）。
