效果展示:
wxml页
<view class="cardimg">
<view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
<image class='weui-uploader__img '
src="{{item}}"
data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
<icon type='cancel' class="delete-btn deleteimgbtn" data-index="{{index}}" catchtap="deleteImg"></icon>
</image>
</view>
<view class="upload-img-btn" bindtap="chooseImg"><view class="iconfont icon-jiahao1 iconadd"></view></view>
</view>
wxss页
.upload-img-btn{
width: 180rpx;
height: 180rpx;
box-sizing: border-box;
border: 1rpx solid #bcbcbc;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.iconadd{
color: #bcbcbc;
font-size: 80rpx;
}
.pic{
position: relative;
width: 180rpx;
height: 180rpx;
margin-right: 20rpx;
}
.pic>image{
width: 100%;
height: 100%;
}
.deleteimgbtn{
position: absolute;
top: -20rpx;
right: -20rpx;
color: #bcbcbc;
}
js页
Page({
/**
* 页面的初始数据
*/
data: {
imgs: []
},
// 上传图片
chooseImg: function (e) {
var that = this;
var imgs = this.data.imgs;
if(imgs.length<2){
this.setData({
lenMore: 1
});
}else{
}
wx.chooseImage({
count: 2, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
console.log(res)
var tempFilePaths = res.tempFilePaths;
var imgs = that.data.imgs;
for (var i = 0; i < tempFilePaths.length; i++) {
if (imgs.length >= 2) { //如果已经上传的图片>=2,则不能新上传,否则,追加给imgs
that.setData({
imgs: imgs
});
wx.showToast({
title: '抱歉!您只能上传两张图片~',
icon: 'none'
})
return false;
} else {
imgs.push(tempFilePaths[i]);
}
}
that.setData({
imgs: imgs
});
}
});
},
// 删除图片
deleteImg: function (e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
imgs: imgs
});
},
// 预览图片
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.imgs;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
}
})
封装
util.js
function uploadFile (tempFilePaths,imgsList,idcardwh,imageURL) {
return new Promise((resolve, reject) => {
for (var i = 0; i < tempFilePaths.length; i++) {
imgsList.push(tempFilePaths[i]);
// 压缩图片
wx.compressImage({
src: tempFilePaths[i],
success(res){
var ystempFilePath=res.tempFilePath
wx.uploadFile({
url: imageURL,
filePath: ystempFilePath,
name: 'file',
success (res){
var data = JSON.parse(res.data)
console.log('图片上传',data)
idcardwh.push(data.data)
let resolveData = {
imgs: imgsList,
idcardwh: idcardwh
}
resolve(resolveData);
}
})
},
})
}
})
}
module.exports = {
uploadFile:uploadFile
}
js
//导入
var uploadFile = require("../../../utils/util.js").uploadFile
chooseImg: function (e) {
var that = this;
wx.chooseImage({
count: 9, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
var imgs = that.data.imgs;
var idcardwh=that.data.idcardwh
if (imgs.length >9) { //如果已经上传的图片>=2,则不能新上传,否则,追加给imgs
that.setData({
imgs: imgs
});
wx.showToast({
title: '抱歉!您只能上传九张图片~',
icon: 'none'
})
return false;
} else {
//直接使用(选择成功后的路径,在页面上显示的路径,给后台传的路径,上传图片的api地址)
uploadFile(tempFilePaths,imgs,idcardwh,imageURL).then(res=>{
that.setData({
imgs:res.imgs,
idcardwh:res.idcardwh
});
})
}
}
});
},