微信小程序多张图片上传、预览
WXML部分：
店内图片
WXSS部分：
.picture_list {
padding: 0rpx;
margin: 5px 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.picture_item {
margin-right: 10%;
margin-left: 0;
position: relative;
width: 160rpx;
height: 160rpx;
border: 1px solid #ccc;
box-sizing: border-box;
}
.picture_item .del {
position: absolute;
top: -11rpx;
right: -11rpx;
color: #fff;
border-radius: 50%;
width: 40rpx;
height: 40rpx;
z-index: 2;
line-height: 35rpx;
text-align: center;
background-color: #f00;
}
.upload_progress {
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
border-radius: 8rpx;
background-color: #000;
color: #fff;
width: 160rpx;
height: 160rpx;
text-align: center;
line-height: 160rpx;
font-size: 12px;
}
.picture_item image {
width: 160rpx;
height: 160rpx;
}
js部分：
/**
* 选择图片方法
*/
uploadpic: function(e) {
var that = this //获取上下文
//选择图片
wx.chooseImage({
count: 8,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
// console.log("选择图片的返回结果", res)
if (res.errMsg == "chooseImage:ok") {
var upload_picture_list = new Array();
var tempFiles = res.tempFiles
//把选择的图片 添加到集合里
for (var i in tempFiles) {
tempFiles[i]['upload_percent'] = 0
tempFiles[i]['path_server'] = ''
// console.log("选择图片下标" + i)
upload_picture_list.push(tempFiles[i])
}
//显示
that.setData({
upload_picture_list: upload_picture_list,
});
that.uploadimage();
}
// console.log("选择图片保存的路径" + JSON.stringify(that.data.upload_picture_list));
}
})
},
/**
* 点击上传图片
*/
uploadimage() {
let page = this
let upload_picture_list = page.data.upload_picture_list
let url = util.apiUrl
//循环把图片上传到服务器 并显示进度
wx.showLoading({
title: '正在上传'
})
for (let j in upload_picture_list) {
if (upload_picture_list[j]['upload_percent'] == 0) {
// console.log("循环要上传的图片路径" + JSON.stringify(upload_picture_list[j].path))
//上传图片后端地址
upload_file_server(url + '/AppApiStore/Upload/UploadUserPic', page, upload_picture_list[j].path, j)
}
}
},
/**
* 删除图片
*/
deleteImg: function(e) {
let upload_picture_list = this.data.upload_picture_list;
let index = e.currentTarget.dataset.index;
upload_picture_list.splice(index, 1);
this.setData({
upload_picture_list: upload_picture_list
});
},
/**
* 上传图片方法
*/
function upload_file_server(url, that, upload_picture_list, j) {
// console.log("接收到的图片路径是" + upload_picture_list)
//上传返回值
const upload_task = wx.uploadFile({
// 模拟https
url: url, //需要用HTTPS，同时在微信公众平台后台添加服务器地址
filePath: upload_picture_list, //上传的文件本地地址
name: 'file',
formData: {
param: JSON.stringify({
UserID: wx.getStorageSync('UserID'), //用户ID
})
},
//附近数据，这里为路径
success: (res) => {
var data = JSON.parse(res.data);
// console.log("上传图片的返回值是：" + JSON.stringify(data));
var imgUrl = data.DATA.PictureUrl; //图片网络地址
var imgs = that.data.imgs; //图片数组
imgs.push(imgUrl);
that.setData({
imgs: imgs
})
wx.hideLoading();
}
})