微信小程序如何做一個上傳圖片，并且點擊圖片可以預覽微信小程序 圖片庫，提交圖片后，點擊查看。注：目前微信小程序還不支持圖片上傳。
邏輯是：點擊圖片小圖標，直接上傳圖片到服務器，然后后臺返回圖片id碼，在提交表單的時候，把圖片id碼提交到后臺，這樣是為了綁定id碼和記錄。
網上大多數文章寫的是在的時候，直接上傳圖片，那樣做有一個弊端，無論是否這個表單提交，只要你選擇了圖片，后臺都保存了那一張，無形給后臺服務器造成了巨大的壓力；除此之外，還有一個弊端微信小程序 圖片庫，就是如果每次只添加一張，那么之前添加的圖片，又會被重新提交到后臺一次。
所以我做了一下改良，在表單提交的時候，再進行圖片上傳處理，沒有直接在選擇圖片的時候進行上傳處理:
刪除
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], //當前預覽的圖片
urls: arr, //所有要預覽的圖片
});
},
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標簽的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 //想偷懶都不行，這里需要點擊按鈕后，按鈕就設置成disabled, 避免重負提交
});
var promise = that.uploadImg(); //進行圖片的上傳
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();
}
});
}
})
}
不得不說，我做的改良確實很有效，在選擇圖片后，刪除圖片，重新選擇，不會立刻傳圖，就不會有操作錯誤的圖片提交，但是，這地方需要圖片上傳完成后，才能進行表單提交操作，涉及到同步問題，暫時處理得還不夠完美。先實現功能，在做優化吧。