小程序单张图片

<view class="gallery">

<view class='tipTitle'>

快去上传自己的照片吧

</view>

<view class='item-ot'>

<view class="item">

<!-- 添加按钮 -->

<view class="addIcon" bindtap="chooseImage" wx:if="{{imgBoolean}}">

<view class=''>+</view>

</view>

<!-- 上传的图 -->

<view class='itemImg' >

<image src="{{item}}" data-src="{{item}}" bindtap="previewImage" mode="aspectFill" />

<!-- 删除按钮 -->

<view class="delete" bindtap="deleteImg" data-index="{{index}}">X</view>

</view>

<view class='boxStyle'></view>

</view>

<view class='itemTxt'>正面照</view>

</view>

<view class='uploadFinish'>

<a class="uploadFinishBtn" href="javasctipt:;" bindtap="submit">提 交</a>

</view>

</view>

 

/*画廊*/

.gallery {

width:100%;

margin: 0 auto;

display: flex;

justify-content: flex-start;

flex-wrap: wrap;

background: #fffaf0;

}

/*每张图片所占容器*/

.item-ot{

margin:0 auto;

width: 100%;

height: 100%;

}

.item {

position:relative;

margin:0 auto;

width:370rpx;

height:490rpx;

background:#eee;

border:2rpx solid #f9c4c2;

/* overflow:hidden; */

}

.itemImg{

position: absolute;

left: 0;

top:0;

width: 100%;

height: 100%;

overflow: hidden;

z-index:1;

}

.itemImg image{

width: 100%;

height: 100%;

}

/*add按钮*/

.addIcon{

position:absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

text-align:center;

line-height:490rpx;

font-size:80rpx;

background: #fff;

color: #999;

z-index:2;

}

/*删除按钮*/

.delete {

position:absolute;

right:0;

top:0;

/* background:#ccc; */

opacity:1;

height: 36rpx;

font-size:22rpx;

font-weight:700;

padding:0 8rpx 0 10rpx;

color: #999;

}

.itemTxt{

text-align: center;

font-size: 30rpx;

color: #999;

margin-top: 50rpx;

margin-bottom: 70rpx;

font-weight: 700;

}

.uploadFinish{

width: 100%;

height: 100%;

padding: 0 30rpx;

box-sizing: border-box;

}

.uploadFinishBtn{

background: #ff6666;

color: #fff;

display: block;

width: 100%;

padding: 26rpx 0;

text-align: center;

font-size: 36rpx;

border-radius: 10rpx;

margin-bottom: 40rpx;

}

.tipTitle{

text-align: center;

font-size: 30rpx;

color: #f6a29d;

font-weight: 700;

width: 100%;

margin: 50rpx 0;

}

.boxStyle{

width:300rpx;

height:100rpx;

position:absolute;

bottom:-1rpx;

border-radius:50%;

box-shadow:0rpx 10rpx 100rpx #fddbd9;

margin-left:35rpx;

}

 

Page({

 

/**

* 页面的初始数据

*/

data: {

uploadedImages: [],

imgBoolean: true,

},

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that = this;

},

 

chooseImage: function () {

var that = this;

// 选择图片

wx.chooseImage({

count: 1, // 默认9

sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success: function (res) {

// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

var tempFilePaths = res.tempFilePaths

that.setData({

item: tempFilePaths[0],

imgBoolean: false

});

}

})

},

// 图片预览

previewImage: function (e) {

var current = e.target.dataset.src

console.log(e)

wx.previewImage({

current: current,

urls: [current]

})

console.log("这是1" + current);

},

//删除图片

deleteImg: function (e) {

var that = this;

console.log(that)

var images = that.data.uploadedImages;

that.setData({

uploadedImages: images,

imgBoolean: true

});

}

})

https://blog.csdn.net/YangBingX/article/details/80929404