小程序多图上传
效果图
WXML部分:upimg.png是一张+号图。x.png 是图片删除按钮。
<!--图片上传-->
<view class='imgsbox'>
<view class="weui-uploader" style='display:{{none}}'>
<view class="img-v">
<view class="img" wx:for="{{imgs1}}" wx:for-item="item" wx:key="*this">
<image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg1"></image>
<view class="delete-btn" data-index="{{index}}" catchtap="deleteImg1">
<image class='imgx' src='../images/x.png'></image>
</view>
</view>
<view class="upload-img-btn" bindtap="chooseImg1">
<image src='../images/upimg.png'></image>
</view>
</view>
</view>
<view class='tishi'>*最多可上传9张图片</view>
</view>
<!--图片上传-结束-->
wxss:
.imgsbox{
width: 690rpx;
padding: 20rpx;
margin: auto;
background: #fff;
border-radius:0 0 14rpx 14rpx;
border-right: 1px solid #d6d7dc;
border-left: 1px solid #d6d7dc;
border-bottom: 1px solid #d6d7dc;
box-sizing: border-box;
overflow: hidden;
}
.weui-cells{
font-size: 30rpx!important;
}
.weui-cell::before{
border-top:1rpx solid #eee;
}
.upload-img-btn image{
width: 185rpx;
height: 185rpx;
}
.upload-img-btn{
float: left;
}
.img{
width: 185rpx;
height: 185rpx;
float: left;
margin: 15rpx;
position: relative;
overflow: hidden
}
.delete-btn{
position: absolute;
bottom: 0;left: 0;
background-color: rgba(0,0,0,.5);
color: #fff;
text-align: center;
line-height: 40rpx;
width: 100%;
}
.img image{
width: 185rpx;
height: 185rpx
}
.weui-select{
border-right: none;
}
.weui-uploader__hd{
float: left;
}
.weui-uploader__title{
width: 150rpx!important;
}
.weui-label{
width: 150rpx!important;
}
.upload-img-btn image{
margin: 10rpx;
}
js部分:
//上传图片开始
chooseImg1: function (e) {
var that = this;
var imgs1 = that.data.imgs1;
if (imgs1.length >= 9) {
this.setData({
lenMore: 1
});
setTimeout(function () {
that.setData({
lenMore: 0
});
}, 2500);
return false;
}
wx.chooseImage({
// count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
var imgs1 = that.data.imgs1;
for (var i = 0; i < tempFilePaths.length; i++) {
if (imgs1.length >= 9) {
that.setData({
imgs1: imgs1
});
// return false;
} else {
imgs1.push(tempFilePaths[i]);
}
}
that.setData({
imgs1: imgs1
});
that.setData({
picture1: []
})
var tempFilePaths = that.data.imgs1
for (var s = 0; s < tempFilePaths.length; s++) {
wx.uploadFile({
url: app.config.apiUrl + 'Api/Common/uploadImage',
filePath: tempFilePaths[s],
name: 'image',
success: function (res) {
var data = res.data;
console.log(data)
var data = JSON.parse(res.data);
console.log(data)
var img_data = that.data.img_data;
img_data.push(data.data);
console.log(img_data)
that.setData({
img_data: img_data
})
}
})
}
},
fail:function(res){
},
complete: function (res) {
}
});
},
// 删除图片
deleteImg1: function (e) {
var that = this;
var imgs1 = this.data.imgs1;
var img_data = that.data.img_data;
var index = e.currentTarget.dataset.index;
imgs1.splice(index, 1);
img_data.splice(index, 1);
this.setData({
imgs1: imgs1,
img_data: img_data
})
},
// 预览图片
previewImg1: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs1 = this.data.imgs1;
wx.previewImage({
//当前显示图片
current: imgs1[index],
//所有图片
urls: imgs1
})
},