微信小程序多图上传，删除，预览集一体的代码；
//wxml
<view class='picList'>
<view class='item' wx:for="{
{imgUrl}}" wx:for-index="key">
<image class="thumb" data-current="{
{item}}" data-index="{
{key}}" bindtap='previewImg' src="{
{item}}"/>
<view class='delPic' bindtap='remImg' data-id="{
{key}}"><image src='/images/delPic.png'/></view>
</view>
<view class='upload' bindtap="imgupload" ><image src='/images/upload.png'></image></view>
</view>
//css
.picList{
box-sizing: border-box;
padding-left:20rpx;
padding-right:20rpx;
overflow: visible;
}
.clear{
clear: both;
}
.upload{
float:left;
width:120rpx;
height:120rpx;
margin-bottom: 20rpx;
}
.upload image{
display: block;
width:100%;
height:100%;
}
.picList .item{
display: block;
float:left;
margin-right:20rpx;
margin-bottom: 20rpx;
width: 120rpx;
height: 120rpx;
position: relative;
overflow: visible;
}
.picList .item .delPic{
width: 30rpx;
height: 30rpx;
position: absolute;
right: -15rpx;
top:-15rpx;
}
.picList .item .delPic image{
display: block;
width: 100%;
height: 100%;
}
.picList .item>image{
display: block;
width:100%;
height:100%;
}
const app = getApp()
Page({
data:{
imgUrl:[],
},
imgupload: function () {
var that = this;
var count = parseInt((that.data.imgUrl).length);
if (count >= '15') {
wx.showToast({
title: '最多上传15张',
duration: 1500
})
return false;
}
wx.chooseImage({
count: 9,
sizeType: ['compressed'],
success: function (res) {
var tempFilePaths = res.tempFilePaths;
var i = 0; //第几个
var length = res.tempFilePaths.length; //总共个数
var successUp = 0; //成功个数
var failUp = 0; //失败个数
that.uploadImg(tempFilePaths, successUp, failUp, i, length);
}
})
},
uploadImg: function (tempFilePaths, successUp, failUp, i, length) {
var that = this;
var token = wx.getStorageSync('token');
wx.uploadFile({
url: api.api.upload,
filePath: tempFilePaths[i],
name: 'name',
header: {
'content-type': 'multipart/form-data',
'Authorization': token
},
success: function (res) {
var srcArr = that.data.imgUrl;
srcArr.push(res.data);
that.setData({
imgUrl: srcArr
});
}, complete: () => {
i++;
if (i == length) {
return;
} else {
//递归调用uploadDIY函数
if (!that.data.isuploaderror) {
this.uploadImg(tempFilePaths, successUp, failUp, i, length);
}
}
}
})
},
// 删除
remImg:function(e){
var that = this;
var dataset = e.currentTarget.dataset;
var Index = dataset.id;
that.data.imgUrl.splice(Index, 1);
that.setData({
imgUrl: that.data.imgUrl
});
console.log(that.data.imgUrl)
},
// 图片预览
previewImg: function (e) {
var index = e.currentTarget.dataset.index;
var imgArr = this.data.imgUrl;
wx.previewImage({
current: imgArr[index], //当前图片地址
urls: imgArr, //所有要预览的图片的地址集合 数组形式
success: function (res) {
},
fail: function (res) {
},
complete: function (res) {
},
})
},
})