微信小程序多张图片上传。
先要选择图片,调用微信的chooseimage,选择需要的图片,图片的选择可以加上是否是缩略图。缩略图是压缩后的图片,图片所占的空间不大
将图片的地址存到imagelist中,然后循环上传到服务器。
这是小程序二维码
ChooseImage() {
wx.chooseImage({
count: 3, //默认9
sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album','camera'], //从相册选择
success: (res) => {
if (this.data.imgList.length != 0) {
this.setData({
imgList: this.data.imgList.concat(res.tempFilePaths)
})
} else {
this.setData({
imgList: res.tempFilePaths
})
}
}
});
},
ViewImage(e) {
wx.previewImage({
urls: this.data.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
wx.showModal({
title: '提示',
content: '确定要删除这张照片吗?',
cancelText: '取消',
confirmText: '确认',
success: res => {
if (res.confirm) {
this.data.imgList.splice(e.currentTarget.dataset.index, 1);
this.setData({
imgList: this.data.imgList
})
}
}
})
},
uploadimg: function (data) {
wx.showLoading({
title: '上传中...',
mask: true,
})
var that = this,
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
wx.uploadFile({
url: data.url,
filePath: data.path[i],
name: 'file',
success: function (res) {
var now = that.data.imageurls
now = now + res.data + ";"
that.setData({
imageurls: now
})
console.log(that.data.imageurls);
},
complete: () => {
i++;
if (i == data.path.length) { //当图片传完时,停止调用
var that = this;
console.log('执行完毕');
wx.hideLoading();
wx.request({
url: app.globalData.requestUrl + '/up_daka_text',
data: {
id: that.data.id,
openid: app.globalData.openid,
avatarurl: app.globalData.userInfo.avatarUrl,
nickname: app.globalData.userInfo.nickName,
text: that.data.textareaBValue,
image:that.data.imageurls
},
method: 'POST',
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: (res) => {
console.log(res.data)
if (res.data.code == 1) {
that.setData({
daka_success: 1
})
} else {
wx.showToast({
title: '打卡失败',
icon: 'none'
})
}
}
})
console.log('成功:' + success + " 失败:" + fail);
var myEventDetail = {
picsList: that.data.detailPics
} // detail对象,提供给事件监听函数
var myEventOption = {} // 触发事件的选项
that.triggerEvent('myevent', myEventDetail, myEventOption) //结果返回调用的页面
} else { //若图片还没有传完,则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
this.uploadimg(data); //递归,回调自己
}
}
});
},