小程序上传图片,放大,删除。

前言: 

  小程序里面上传照片,可以删除,可以放大查看,最多上传8张(张数限制可以自己修改)

上代码:

    <!-- 上传照片  star -->
<view class="ops ops_img">
<view class="ops_title">照片(限制上传8张)</view>
<!-- 图片上传列表 star -->
<view class="img">
<view class="img_list" wx:for="{{img_list}}"  wx:for-item="item" wx:key="*this" >
<image  data-index="{{index}}"  src="{{item}}" class="tupian" mode="aspectFit" bindtap="tupian"></image>
<image  data-index="{{index}}"  src="../../images/delete.png" class="close" catchtap="del"></image>
</view>
<image src="../../images/picture01.png" class="upload {{picture == 0 ? ‘show‘ :‘hide‘}}" bindtap="upload" ></image>
</view>
<!-- 图片上传列表 end -->
</view>
<!-- 上传照片  end -->
.ops_img{
margin-bottom: 40rpx;
}
.img{
height: auto;
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
}
.img_list{
position: relative;
width: 140rpx;
height: 140rpx;
float: left;
margin-top: 20rpx;
margin-bottom: 0rpx;
border-radius: 15rpx;
}
.tupian{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.close{
width: 30rpx;
height: 26rpx;
position: absolute;
right: 0;
top: 0;
}
Page({
/**
* 页面的初始数据
*/
data: {
img_list:[],
lenMore:0,
picture:0
},// 上传照片
upload:function(){
let $this = this;
let $imglist = $this.data.img_list;
if($imglist.length >=8 ){
wx.showToast({
title: ‘最多上传8张‘,
icon: ‘error‘,
duration: 2000
})
}else{
wx.chooseImage({
// count: 1, // 默认8
count: 1,
sizeType: [‘original‘, ‘compressed‘],  // 可以指定是原图还是压缩图,默认二者都有
sourceType: [‘album‘, ‘camera‘],     // 可以指定来源是相册还是相机,默认二者都有
                success (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
let $imglist = $this.data.img_list;
for (var i = 0; i < tempFilePaths.length; i++) {
$imglist.push(tempFilePaths[i]);
}
$this.setData({
img_list: $imglist
});
}
})
}
},
//预览大图
tupian:function(e){
//获取当前图片的下标
let $index = e.currentTarget.dataset.index;
//所有图片
let $imglist = this.data.img_list;
console.info($index,$imglist[$index])
wx.previewImage({
//当前显示图片
            current: $imglist[$index],
//所有图片
            urls: $imglist
})
},
//删除图片
del:function(e){
let  $imglist = this.data.img_list;
let  index = e.currentTarget.dataset.index;
$imglist.splice(index, 1);
this.setData({
img_list: $imglist
});
}
})

注 : 本文参考链接 : https://blog.csdn.net/anLazyAnt/article/details/77374905

小程序上传图片,放大,删除。

原文:https://www.cnblogs.com/zwh520/p/15127787.html

以上是小程序上传图片,放大,删除。的全部内容。
THE END
分享
二维码
)">
< <上一篇
下一篇>>