小程序多图上传

HTML:

<view class="gallery">

<view class="item" wx:for="{{images}}" wx:key="">

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



<!-- 删除按钮 -->

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

</view>

<view class="item" bindtap="chooseImage">

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

</view>

</view>

<button type="primary" bindtap="submit">提交</button>

CSS:

/*画廊*/

.gallery {

width:630rpx;

margin: 0 auto;

display: flex;

justify-content: flex-start;

flex-wrap: wrap;

}

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

.item {

position: relative;

margin:10rpx 5rpx;

width: 200rpx;

height: 200rpx;

}

.item image{

width: 100%;

height: 100%;

}

/*add按钮*/

.item .addIcon{

position:relative;

width:200rpx;

height:200rpx;

text-align:center;

line-height:200rpx;

font-size:80rpx;

background: #f2f2f2;

color: #555;

}

/*删除按钮*/

.delete {

position:absolute;

right:0;

top:0;

/* background:#ccc; */

opacity:1;

height: 36rpx;

font-size:22rpx;

font-weight:700;

padding:0 8rpx 0 10rpx;

}

 

JS:

var that;

Page({

data: {

images: [],

uploadedImages: [],

},

onLoad: function (options) {

that = this;

var objectId = options.objectId;

console.log(objectId);

},

chooseImage: function () {

// 选择图片

wx.chooseImage({

count: 3, // 默认9

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

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

success: function (res) {

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

var tempFilePaths = res.tempFilePaths;

console.log(tempFilePaths);

that.setData({

// item: tempFilePaths[0],

// imgBoolean: false

images: that.data.images.concat(tempFilePaths)

});

}

})

},

// 图片预览

previewImage: function (e) {

var current = e.target.dataset.src

console.log(e)

wx.previewImage({

current: current,

// urls: [current]

urls: this.data.images

})

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

},

//删除图片

delete: function (e) {

// var that = this;

var index = e.currentTarget.dataset.index;

var images = that.data.images;

images.splice(index,1);

// console.log(that)

// var images = that.data.uploadedImages;

that.setData({

// uploadedImages: images,

// imgBoolean: true

images: images

});

}

})