效果:
1,xhtml
其中wx:for="{{picArr}}" 为所有的图片张数, src 为img 的图片路径 ; 自定义data-src为当前点击的图片路劲(为预览做准备) 自定义 data-list为所有的图片张数(为预览做准备)
<block wx:key="imgbox" wx:for="{{picArr}}">
<view class='add-pic'>
<image class='add-pic' data-list='{{picArr}}' data-src="{{urlPrev + '/zdhx/WXA018/getImg?name=' + item.nowURL}}" src="{{urlPrev + '/zdhx/WXA018/getImg?name=' + item.nowURL}}" data-index="{{index}}" bindtap="picPreview"></image>
<view class='img-de' bindtap="deleteImg" data-index="{{index}}">
<icon type="clear" size="20" />
</view>
</view>
</block>
//点击+号上传 样式自己写
<view class='add-pic'>
<view class='btn' bindtap='chooseImg'>+</view>
</view>
2,JS
Page({
data{
urlPrev: serverInterface.urlPrev, //urlPrev为接口ip地址 let serverInterface = require("../../utils/server.js");
picArr: [ ],
arrPicSave:[ ],
}
})
// 上传图片
chooseImg: function () {
let that = this;
wx.chooseImage({
count: 9,
sizeType: [],
sourceType: ['album', 'camera'],
success: function (res) {
let tempFilePaths = res.tempFilePaths
for (let i = 0; i < tempFilePaths.length; i++) {
wx.uploadFile({
url: that.data.urlPrev + '/zdhx/WXA018/uploadTask',
filePath: tempFilePaths[i],
name: 'file',
formData: {
},
success: function (res) {
wx.hideLoading();
let imgeList = that.data.picArr.concat(JSON.parse(res.data).entity);
that.setData({
picArr: imgeList
});
}
});
wx.showLoading({
title: '正在上传...',
})
}
},
fail: function (res) {
console.log(res, '失败');
},
complete: function (res) { },
})
},
// 删除图片
deleteImg: function (e) {
let that = this;
let index = e.currentTarget.dataset.index;
let images = that.data.picArr;
images.splice(index, 1);
that.setData({
picArr: images
});
},
// 图片预览
picPreview: function (event) {
let _this = this;
let urlPrev = _this.data.urlPrev
// 获取当前点击src,以及接口返回的所有src 就是xhtml里的data-src和data-list
var src = event.currentTarget.dataset.src;
var imgList = event.currentTarget.dataset.list;
// 每次点击图片,先清空数组
_this.setData({
arrPicSave: []
})
// 遍历多少张图片,然后字符串转数组并添加到arrPicSave中
for (var i = 0; i < imgList.length; i++) {
var forEachData = urlPrev + '/zdhx/WXA018/getImg?name=' + imgList[i].nowURL.split(',')
_this.data.arrPicSave.push(forEachData);
}
// 预览
wx.previewImage({
current: src, //当前点击预览的图片
urls: _this.data.arrPicSave //供左右侧滑的所有图片
})
},