小程序基本功能还是比较齐全的,关于上传图片这块,只需要调用wx.chooseImage()API即可实现图片上传效果。
但是最近在使用的时候发现一个坑,就是后台一次只能接收到一张图片,如果要实现多图上传就有点尴尬了,需要自己进行处理,查询了一番度娘发现这个问题大家基本都遇到过,方法也比较好找,在这里贴下代码,方便小伙伴们和自己以后进行查阅。
//js部分
data: {
src: []
},
//选择图片
chooseImgTap() {
var that = this
wx.chooseImage({
count: 9,
success: function (res) {
// 成功个数
var successUp = 0
// 失败个数
var failUp = 0
// 总共个数
var length = res.tempFilePaths.length
// 第几个
var i = 0
wx.showToast({
title: '上传中',
icon: 'loading',
mask: true
})
that.uploadDIY(res.tempFilePaths, successUp, failUp, i, length)
}
})
},
// 上传图片
uploadDIY (filePaths, successUp, failUp, i, length) {
wx.uploadFile({
url: 'xxxx.com/index.php/v1/bbsarticle/uploadfile',//后端地址
filePath: filePaths[i],
name: 'pic',
success: (res) => {
successUp++
},
fail: (res) => {
failUp++
},
complete: (res) => {
this.data.src.push(JSON.parse(res.data).data.url)
i++
if (i == length) {
this.setData({
src: this.data.src
})
wx.hideToast()
setTimeout((res) => {
wx.showToast({
title: '上传成功',
icon: 'success',
mask: true
})
}, 500)
} else { //递归调用uploadDIY函数
this.uploadDIY(filePaths, successUp, failUp, i, length)
}
},
})
},
//图片预览
previewImgTap(event) {
var that = this
let index = event.currentTarget.dataset.index
wx.previewImage({
urls: that.data.src,
current: that.data.src[index]
})
},
//删除图片
delImage(event) {
let that = this
let index = event.currentTarget.dataset.index
wx.showModal({
title: '',
content: '是否删除图片',
success(res) {
if (res.confirm) {
that.data.src.splice(index, 1)
that.setData({
src: that.data.src
})
}
}
})
},
小程序关于图片的处理大概就是上传预览删除这三大块,以上代码即可以实现全部功能,有错误的地方欢迎小伙伴的指正!!!