微信小程序?qū)崿F(xiàn)圖片上傳放大預覽刪除代碼

第微信小程序?qū)崿F(xiàn)圖片上傳放大預覽刪除代碼本文實例為大家分享了微信小程序圖片上傳放大預覽的具體代碼，供大家參考，具體內(nèi)容如下

效果：

image.js代碼：

Page({

//選擇相冊或拍照

data:{

imgs:[]

//上傳圖片

chooseImg:function(e){

varthat=this;

varimgs=this.data.imgs;

if(imgs.length=9){

this.setData({

lenMore:1

setTimeout(function(){

that.setData({

lenMore:0

},2500);

returnfalse;

wx.chooseImage({

//count:1,//默認9

sizeType:['original','compressed'],//可以指定是原圖還是壓縮圖，默認二者都有

sourceType:['album','camera'],//可以指定來源是相冊還是相機，默認二者都有

success:function(res){

//返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片

vartempFilePaths=res.tempFilePaths;

varimgs=that.data.imgs;

//console.log(tempFilePaths+'');

for(vari=0;itempFilePaths.length;i++){

if(imgs.length=9){

that.setData({

imgs:imgs

returnfalse;

}else{

imgs.push(tempFilePaths[i]);

//console.log(imgs);

that.setData({

imgs:imgs

//刪除圖片

deleteImg:function(e){

varthat=this;

varimgs=that.data.imgs;

varindex=e.currentTarget.dataset.index;//獲取當前長按圖片下標

wx.showModal({

title:'提示',

content:'確定要刪除此圖片嗎？',

success:function(res){

if(res.confirm){

console.log('點擊確定了');

imgs.splice(index,1);

}elseif(res.cancel){

console.log('點擊取消了');

returnfalse;

that.setData({

imgs:imgs

//預覽圖片

previewImg:function(e){

//獲取當前圖片的下標

varindex=e.currentTarget.dataset.index;

//所有圖片

varimgs=this.data.imgs;

wx.previewImage({

//當前顯示圖片

current:imgs[index],

//所有圖片

urls:imgs

})

image.wxml代碼：

buttonbindtap="chooseImg"上傳/button

viewwx:for="{{imgs}}"wx:for-item="item"wx:key="*this"

imagesrc="{{item}}"data-index="{{index}}"mode="widthFix"bindtap="previewImg"bindlong