1.效果图
2.图一为效果图，，图2为放大效果图
3.支持批量上传，支持删除，预览功能
4.代码：wxml
一键上传
5.主要wxss样式，根据自己需要来调整
#photoPic{
display: flex;
flex-wrap: wrap;
position: relative;
}
.show-image{
width: 190rpx;
height: 190rpx;
margin:20rpx;
}
.show-imager{
width: 190rpx;
height: 190rpx;
margin:20rpx;
background-color: #E3E8F2;
position: relative;
}
.delete-image{
position: absolute;
top: 10rpx;
right: 10rpx;
width: 40rpx;
height: 40rpx;
}
#upPic{
position: absolute;
top: 120rpx;
left: 34rpx;
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #0C264E;
text-align: center;
font-weight: 400;
}
#leftpic{
margin:40rpx 62rpx;
width: 62rpx;
height: 62rpx;
}
6. js代码
// 上传方法
gotoShow(){
// 状态only 判断是否可以上传的，为0直接return出去
if(this.data.only == 0){
return
}
var _this = this
wx.chooseImage({
count: 9, // 最多可以选择的图片张数，默认9
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
soure: ['ceTypalbum', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: function(res){
// 对上传文件的格式进行校验
var picType = false
for(var i= 0; i< res.tempFilePaths.length; i++){
if(res.tempFilePaths[i].includes('.png') || res.tempFilePaths[i].includes('.jpg') || res.tempFilePaths[i].includes('.jpeg') || res.tempFilePaths[i].includes('.gif')){
picType = true
}else{
picType = false
break
}
}
if( !picType){
wx.showToast({
title:'支持.png/ .jpg/ .jpeg/ .gif 格式图片',
icon:'none'
})
return
}
const srcer = [..._this.data.src,...res.tempFilePaths]
_this.setData({
src:srcer
})
// 也可以在这里加上上传的loading，在数组_this.data.src.length -1 与循环的index相等时关闭loading
// 循环上传图片
_this.data.src.forEach(item=>{
wx.uploadFile({
url: baseURL + '/common/upload',
filePath: item,
header:{ Authorization: 'Bearer' + wx.getStorageSync('token') },
name: 'file',
success (res){
console.log('888');
const arr = _this.data.annexPic
arr.push(JSON.parse(res.data).url)
_this.setData({
annexPic:arr
})
console.log(arr,_this.data.annexPic);
}
})
})
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
// 大图预览
viewPic(e){
wx.previewImage({
current: e.currentTarget.dataset.item, // 当前显示图片的 http 链接
urls: this.data.src // 需要预览的图片 http 链接列表
})
},
// 删除照片
deletePic(e){
// 这里在查看的时候没处理wxml，在这里做了限制，查看点击直接return
if(this.data.only == '0'){
return
}
const srcer = this.data.src
srcer.splice(e.currentTarget.dataset.index,1)
this.setData({
src:srcer
})
},
7.上面代码命名和变量有点混乱，根据自己需求来写，不要在意，主要是为了j如果有问题还请指正，谢谢！！！
8.补充，貌似wx.chooseimage不维护了(但是还可以用)，可以换为wx.chooseMedia，返回的数据格式就有了变化，需要修改下代码
gotoShow(){
// 状态only 判断是否可以上传的，为0直接return出去
if(this.data.only == 0){
return
}
var _this = this
wx.chooseMedia({
count: 9, // 最多可以选择的图片张数，默认9
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
soureType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: function(res){
// 对上传文件的格式进行校验
console.log(res);
var picType = false
let pathArr = []
for(var i= 0; i< res.tempFiles.length; i++){
if(res.tempFiles[i].tempFilePath.includes('.png') || res.tempFiles[i].tempFilePath.includes('.jpg') || res.tempFiles[i].tempFilePath.includes('.jpeg') || res.tempFiles[i].tempFilePath.includes('.gif')){
picType = true
pathArr.push(res.tempFiles[i].tempFilePath)
}else{
picType = false
break
}
}
if( !picType){
wx.showToast({
title:'支持.png/ .jpg/ .jpeg/ .gif 格式图片',
icon:'none'
})
return
}
const srcer = [..._this.data.src,...pathArr]
_this.setData({
src:srcer
})
// 也可以在这里加上上传的loading，在数组_this.data.src.length -1 与循环的index相等时关闭loading
// 循环上传图片
_this.data.src.forEach(item=>{
wx.uploadFile({
url: baseURL + '/common/upload',
filePath: item,
header:{ Authorization: 'Bearer' + wx.getStorageSync('token') },
name: 'file',
success (res){
console.log('888');
const arr = _this.data.annexPic
arr.push(JSON.parse(res.data).url)
_this.setData({
annexPic:arr
})
console.log(arr,_this.data.annexPic);
}
})
})
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
