wxml
<view class="up_items">
<view class="up_item" wx:for="{{images}}" wx:key="*this">
<image class="up_image" src="{{item}}"></image>
</view>
<view class="up_btn" bindtap="upLoad" wx:if="{{images.length<10}}">
<view class="up_add">+</view>
<view class="up_lable">上传9张</view>
</view>
</view>
wxss
.up_items{
padding:30rpx 30rpx 120rpx;
overflow: hidden;
}
.up_item,.up_btn{
width: 210rpx;
margin:10rpx;
height: 160rpx;
text-align: center;
color: #999999;
border: dashed 1rpx #979797;
border-radius: 10rpx;
float: left;
}
.up_image{
width: 210rpx;
height: 100%;
}
.up_add{
font-size: 100rpx;
line-height: 100rpx;
}
.up_lable{
font-size: 26rpx;
position: relative;
top: -10rpx;
}
js
data: {
images:[]
},
upLoad: function(e) {
let _this = this;
wx.chooseImage({
count: 10 - _this.data.images.length,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: res => {
let tempFilePaths = res.tempFilePaths;
let images = _this.data.images;
if ((images.length + tempFilePaths.length) > 9) {
wx.showToast({
title: "最多只能上传9张",
icon: 'none'
})
return;
}
tempFilePaths.map(i => {
_this.uploadFile(i).then(res => {
images.push(res);
_this.setData({
images: images
});
});
});
}
})
},
uploadFile(tempFilePath) {
wx.showLoading({
title: '上传中',
})
return new Promise(resolve => {
wx.uploadFile({
url: `${app.globalData.serviceUrl}app-api/upload/uploadOSSFile`,//上传地址
filePath: tempFilePath,
name: 'filePath',//上传参数
header: {
'content-type': 'multipart/form-data'
},
success: res => {
wx.hideLoading()
let data = JSON.parse(res.data)
if(data.code==200){
resolve(data.data);
}else{
wx.showToast({
title: data.msg,
icon: 'none'
})
}
},
fail:res=>{
console.log(res)
}
})
})
},