最近写了一个小程序案例,分享出来,大家指点下。
<button bindtap='bindChooiceProduct'>图片上传</button>
<view>
<view wx:for="{{imgindex}}" data-index="{{index}}" bindlongpress='removeimge'>
<span>删除</span>
<image src='{{item}}'></image>
</view>
</view>
// pages/chooseimg/chooseimg.js
Page({
/**
* 页面的初始数据
*/
data: {
imgindex:[]
},
bindChooiceProduct(){
const that=this;
wx.chooseImage({
count: 3, //最多可以选择的图片总数
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
wx.showLoading({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 10000
})
if (res.errMsg =='chooseImage:ok'){
wx.hideLoading()
console.log(res);
const tempFilePaths = res.tempFilePaths;
var arr=[];
tempFilePaths.forEach((value,indexindex)=>{
arr.push(value)
})
that.setData({
imgindex: arr
})
console.log(that.data.imgindex)
}
}
})
},
//长按事件删除图片
removeimge(e){
const that=this;
let index = e.currentTarget.dataset.index;
let imgindex = that.data.imgindex;
imgindex.splice(index,1);
wx.showModal({
title: '提示',
content: '确定要删除此图片吗?',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
that.setData({
imgindex: imgindex
})
wx.showToast({
title: '删除成功',
icon:'none'
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})