微信小程序如何做一個(gè)上傳圖片，并且點(diǎn)擊圖片可以預(yù)覽微信小程序 圖片庫(kù)，提交圖片后，點(diǎn)擊查看。注：目前微信小程序還不支持圖片上傳。
邏輯是：點(diǎn)擊圖片小圖標(biāo)，直接上傳圖片到服務(wù)器，然后后臺(tái)返回圖片id碼，在提交表單的時(shí)候，把圖片id碼提交到后臺(tái)，這樣是為了綁定id碼和記錄。
網(wǎng)上大多數(shù)文章寫的是在的時(shí)候，直接上傳圖片，那樣做有一個(gè)弊端，無論是否這個(gè)表單提交，只要你選擇了圖片，后臺(tái)都保存了那一張，無形給后臺(tái)服務(wù)器造成了巨大的壓力；除此之外，還有一個(gè)弊端微信小程序 圖片庫(kù)，就是如果每次只添加一張，那么之前添加的圖片，又會(huì)被重新提交到后臺(tái)一次。
所以我做了一下改良，在表單提交的時(shí)候，再進(jìn)行圖片上傳處理，沒有直接在選擇圖片的時(shí)候進(jìn)行上傳處理:
刪除
data: {
images: [],
showEdit: false,
id: '',
aids: []
},
deleteOne: function (e) { //刪除本條
var that = this;
let id = e.currentTarget.dataset.id;
let _params = {
catid: that.data.catid,
id: id
}
Api.everydelete(_params).then(res => {
if (!res.data.code) {
that.resetPage();
}
});
},
removeImage(e) {
let idx = e.target.dataset.idx;
let img = this.data.images;
img.splice(idx, 1);
this.setData({
images: img
});
},
imagePreview(e) {
let idx = e.target.dataset.idx;
let arr = e.target.dataset.arr;
wx.previewImage({
current: arr[idx], //當(dāng)前預(yù)覽的圖片
urls: arr, //所有要預(yù)覽的圖片
});
},
uploadImg: function () {
var that = this;
var aids = [];
var images = that.data.images;
return new Promise(function (resolve, reject) {
for (let i = 0, h = images.length; i < h; i++) {
wx.uploadFile({
url: 'https://www.zhmzjl.com/index.php?m=content&c=punch&a=upload',
filePath: images[i],
name: 'file',
success: function (res) {
let _data = JSON.parse(res.data)
if (_data.code == 0) {
let _aid = _data.aid;
aids.push(_aid);
that.setData({
aids: aids
});
if (images.length == aids.length) {
resolve(aids);
}
}
},
fail: function (res) {
reject(res);
wx.showModal({
title: '提示',
content: '上傳圖片失敗',
showCancel: false,
success: function (res) {
}
});
}
});
}
});
},
chooseImg: function () { //選取圖片
var that = this;
if (that.data.images.length < 3) { // 限制最多只能留下3張照片
wx.chooseImage({
count: 3,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'], // 指定來源
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
let images = that.data.images.concat(res.tempFilePaths);
that.setData({
images: images
});
}
});
}
},
formSubmit: function () {
wx.showLoading();
var that = this,
aids = [];
that.setData({
disabled: true //想偷懶都不行，這里需要點(diǎn)擊按鈕后，按鈕就設(shè)置成disabled, 避免重負(fù)提交
});
var promise = that.uploadImg(); //進(jìn)行圖片的上傳
promise.then(res => {
aids = that.data.aids;
let aidStr = aids.join(';');
let _params = {
catid: that.data.catid,
title: that.data.title,
remark: that.data.remark,
username: that.data.username,
aids: aidStr //圖片
}
if (that.data.id) { //如果有id， 修改
_params.id = that.data.id;
Api.everyupdate(_params).then(res => {
if (!res.data.code) {
wx.hideLoading();
that.resetPage();
}
});
} else {
Api.everyadd(_params).then(res => { //更新
if (!res.data.code) {
wx.hideLoading();
that.resetPage();
}
});
}
})
}
不得不說，我做的改良確實(shí)很有效，在選擇圖片后，刪除圖片，重新選擇，不會(huì)立刻傳圖，就不會(huì)有操作錯(cuò)誤的圖片提交，但是，這地方需要圖片上傳完成后，才能進(jìn)行表單提交操作，涉及到同步問題，暫時(shí)處理得還不夠完美。先實(shí)現(xiàn)功能，在做優(yōu)化吧。