微信小程序-------form表单--------多图上传操作

功能：多图上传图片

实现效果

 

html

 

				<view class="inner_toptitle">
					<view class="img_list">
						<view wx:for="{{imgBigList}}" class="img_item" bindtap="previewClick" data-index="{{index}}">
							<view class="up_img">
								<image style="max-width: 100%; max-height: 100%;" mode="aspectFit" src="{{domain+item}}"></image>
								<view class="del" catchtap="closeClick" data-index="{{index}}">×</view>
							</view>
						</view>
						<view wx:if="{{imgBigList.length<9}}" bindtap="uploadClick" class="img_item">
							<view class="up_img01">
								<view class="centerimg">
									<view class="add">
										<image src="../../../style/img/enroll03.png" alt=""></image>
									</view>
								</view>
							</view>
						</view>
						<view class="clear"></view>
					</view>
				</view>

 

css

/* 上传图片 */
.img_list {}

.add {
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background-color: #f9f9f9;
}

.add image {
	width: 25px;
	height: 25px;
	text-align: center;

}

.img_item {
	/* width: 100px;
	height: 100px; */
	float: left;
	width: 33.3%;
	text-align: center;
	margin: 0px;

}

.up_img image {
	width: 100px;
	height: 100px;
	text-align: center;

}

.up_img {
	position: relative;
}

.del {
	position: absolute;
	top: 0px;
	right: 0px;
}

.tipbottom {
}

.tipbottom .btn {
	float: left;
}

.tipbottom .btn1 {
	margin-right: 10px;
}

.tipbtn {
	font-size: 12px;
	box-sizing: border-box;
	padding: 3px 10px;
	background: #e0efff;
	color: #0179de;

}

.tipbtn2 {
	background: #3693e1;
	color: #ffffff;
}

 

js

 

	//   上传图片
	uploadClick: function () {
		var _this = this;
		var imgBigList = _this.data.imgBigList;
		var imgSmallList = _this.data.imgSmallList;

		var upload = new Upload(this, {
			count: 9,
			type: 'double',
			minWidth: 132,
			minHeight: 132,
			maxWidth: 1080,
			maxHeight: 1920,
			onSuccess: function (res) {
				imgBigList.push(res.big.relativeName);
				imgSmallList.push(res.small.relativeName);
				var Blist = String(imgBigList);
				var Slist = String(imgSmallList);
				_this.setData({
					imgBigList: imgBigList,
					imgSmallList: imgSmallList,
					Blist: Blist,
					Slist: Slist
				})
			},
		});
		upload.choose();
	},
	// 预览
	previewClick(e) {

		var _this = this
		var index = e.currentTarget.dataset.index;
		var imgBigList = _this.data.imgBigList;
		var domain = this.data.domain;
		var list = [];
		imgBigList.forEach(element => {
			list.push(domain + element)
		});
		console.info(list)
		wx.previewImage({
			current: list[index],
			urls: list,
		});

	},
	// 移除图片
	closeClick(e) {
		var _this = this
		var index = e.currentTarget.dataset.index;
		var imgBigList = _this.data.imgBigList;
		imgBigList.splice(index, 1);
		_this.setData({
			imgBigList: imgBigList,
		});

	},