effect:
1，xhtml
Wherein wx: for = "{{picArr }}" for all the pictures number of sheets, the src is img image path; custom data-src to the current click image Road King (preparation for preview) custom data-list is the number of all the pictures (in preparation for preview)
<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>
// Click + Upload your own style to write
<class = View 'the Add-PIC'>
<View class = 'btn' bindtap = 'chooseImg'> + </ View>
</ View>
2，JS
Page ({
Data {
urlPrev: serverInterface.urlPrev, // ip address of the interface for the urlPrev = serverInterface the require the let ( "../../ 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) { },
})
},
// delete the picture
deleteImg: function (E) {
the let = that the this;
the let index = e.currentTarget.dataset.index;
the let Images = that.data.picArr;
images.splice (index,. 1);
that.setData ({
picArr: ImagesRF Royalty Free
});
},
// image preview
picPreview: function (Event) {
the let _this = the this;
the let urlPrev = _this.data.urlPrev
// get the current click src, src, and all the data is in xhtml interface to return and -src-List Data
var = event.currentTarget.dataset.src the src;
var = imgList event.currentTarget.dataset.list;
// CPC image, first empty array
_this.setData ({
arrPicSave: []
})
// iterate many pictures, and then turn the string array and added to the 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);
}
// preview
wx.previewImage ({
current: the src, // current click preview image
urls: _this.data. arrPicSave // All images for the left and right sideslip
})
},