uniapp上传多张图片-带删除按钮查看大图效果demo（整理）

<template>
	<view class="register">
		<view class="registerBox">
			<view class="hintBox row-me row-center">
				<image src="../../static/img/icon_hb.png" mode="" class="img"></image>
				<view class="txt">提交信息领红包，信息越全红包越大</view>
			</view>
			<view class="info">
				<view class="address flex-align" @click="goNewPage('/pages/clientDitch/address')">
					<view class="txt">房型</view>
					<view class="put">
						<view class="txtRss">请选择房型</view>
						<view>
							<image src="../../static/img/btn_tz.png" mode="widthFix" class="RiImg"></image>
						</view>
					</view>
				</view>
				<view class="cardTxt">
					<view class="txt">上传房型图（{{fangXingImg.length}}/9）</view>
				</view>
				<view class="houseType">
					<view class="houseImg" v-for="(item,index) in fangXingImg">
						<image :src="item" @click="preViewImg('fangXingImg',item)" mode="widthFix" class="img">
						</image>
						<image @click="deletePic('fangXingImg',index)" src="../../static/img/delete.png" mode="widthFix"
							class="deleteImg">
						</image>
					</view>

					<view class="addImg flex-center" @click="addPic('fangXing')" v-if="fangXingImg.length <9">
						<image src="../../static/img/tjzp.png" mode="widthFix" class="img" />
						</image>
						<view class="txt">添加图片</view>
					</view>
				</view>
				<view class="border"></view>
				<view class="address flex-align" @click="goNewPage('/pages/clientDitch/address')">
					<view class="txt">户型</view>
					<view class="put">
						<view class="txtRss">请选择户型</view>
						<view>
							<image src="../../static/img/btn_tz.png" mode="widthFix" class="RiImg"></image>
						</view>
					</view>
				</view>
				<view class="cardTxt">
					<view class="txt">上传户型图（{{huXingImg.length}}/9）</view>
				</view>
				<view class="houseType">
					<view class="houseImg" v-for="(item,index) in huXingImg">
						<image :src="item" @click="preViewImg('houseImg',item)" mode="widthFix" class="img"></image>
						<image @click="deletePic('huXingImg',index)" src="../../static/img/delete.png" mode="widthFix"
							class="deleteImg"></image>
					</view>
					<view class="addImg flex-center" @click="addPic('huXing')" v-if="huXingImg.length <9">
						<image src="../../static/img/tjzp.png" mode="widthFix" class="img"></image>
						<view class="txt">添加图片</view>
					</view>
				</view>
				<view class="border"></view>
				<view class="average flex-align">
					<view class="txt">面积</view>
					<view class="areaBox">
						<view class="put flex-align">
							<view class="txt01">单层</view>
							<input type="text" value="" v-model="deposit" placeholder="请输入"
								placeholder-style="color: #CCC;" />
							<view class="txt01">m²</view>
						</view>
						<view class="put flex-align">
							<view class="txt01">全屋</view>
							<input type="text" value="" v-model="deposit" placeholder="请输入"
								placeholder-style="color: #CCC;" />
							<view class="txt01">m²</view>
						</view>
					</view>
				</view>
			</view>
			<view class="selection">
				<view class="title flex-align">
					<view class="border"></view>功能选择
				</view>
				<view class="multipleChoice">
					<view class="label-con u-justify-start u-items-center u-flex-wrap">
						<view class="label-list" :class="{'active': isActive.indexOf(index)!=-1}"
							v-for="(item,index) in tagList" :key="index" @click="addMemberTags(index)">
							{{ item.tag_name }}
						</view>
					</view>
					<view class="textareaTxt">
						<textarea class="textarea" :value="descript" @input="inputHandle($event,'descript')"
							placeholder="若有特殊需求，请输入" placeholder-style="color: #CCC;" maxlength="100" />
						<view class="numTxt">
							{{descriptNum}}/100
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="height210"></view>
		<view class="bottom">
			<view class="entryLr" @click="entryLrClick()">
				跳过
			</view>
			<view class="submitIn" @click="submitInClick()">
				提交
			</view>
		</view>
		<view class="redPacket" v-if="openHide == 1">
			<view class="bg"></view>
			<view class="main">
				<view class="cen">
					<image src="../../static/img/bghb.png" mode="widthFix" class="bgImg"></image>
					<image src="../../static/img/logo.png" mode="widthFix" class="logoImg"></image>
					<view class="txt">恭喜发财，大吉大利</view>
					<image src="../../static/img/open.png" mode="widthFix" class="openImg" @click="openImgClick()">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				deposit: '',
				isActive: [],
				tagList: [{
						tag_name: '测试1',
					},
					{
						tag_name: '测试2',
					},
					{
						tag_name: '测试3',
					},
				],
				descriptNum: '0', //文本域数量
				descript: '',
				openHide: '0',
				fangXingImg: [],
				huXingImg: []
			}
		},
		// 页面加载
		onLoad(e) {
			uni.hideTabBar(); //不让底部显示tab选项
			uni.setNavigationBarTitle({ //动态设置页面title
				// title: '新的标题',
			});
		},
		// 页面显示
		onShow() {

		},
		// 方法
		methods: {
			// 点击提交
			submitInClick() {
				this.openHide = 1

			},
			// 点击红包
			openImgClick() {
				this.openHide = 0
				uni.navigateTo({
					url: '/pages/clientDitch/bearMind'
				})
			},

			// 点击跳过
			entryLrClick() {
				uni.navigateTo({
					url: '/pages/clientDitch/preference'
				})
			},
			// 文本域数量
			inputHandle(e, key) {
				// let value=(typeof e.detail=='object')?e.detail.value:e.detail
				// if(key=='descript'&&value.length>10&&value.length>this.form[key].length){
				// 	// this.showPopup=true
				// }
				// console.log(e)
				// console.log(key)
				// this.form[key]=value
				console.log(e.detail.cursor, '111')
				this.descriptNum = e.detail.cursor
			},
			// 点击功能选择
			addMemberTags(index) {
				console.log(index, '点击的第几个')
				if (this.isActive.indexOf(index) == -1) {
					console.log(index) //打印下标
					this.isActive.push(index); //选中添加到数组里
				} else {
					this.isActive.splice(this.isActive.indexOf(index), 1); //取消
				}
			},
			// 点击个人信息录入
			personMesClick() {
				uni.navigateTo({
					url: '/pages/clientDitch/personMes'
				})
			},

			//获取数据
			getData() {
				this.$.ajax("POST", "/xxxxx/xxxxx", {
					xxxxx: '',
				}, (res) => {
					if (res) {

					}
				});
			},
			//上传图片，户型和房型
			addPic(type) {
				uni.chooseImage({
					count: 9,
					success: (res) => {
						// show('图片上传中...');
						uni.showLoading({
							title: "图片上传中...",
							mask: true,
						})
						console.log(res,'231')
						
						if (type === 'fangXing') {
							let tempList = [...this.fangXingImg, ...res.tempFilePaths] //临时显示
							if (tempList.length > 9) {
								//提示用户 最多只能上传9张
								uni.showToast({
									title: '最多只能上传9张图片哦～'
								});
							} else {
								this.fangXingImg = tempList
								uni.hideLoading();
							}
						} else {
							let tempList = [...this.huXingImg, ...res.tempFilePaths] //临时显示
							if (tempList.length > 9) {
								//提示用户 最多只能上传9张
							} else {
								this.huXingImg = tempList
								uni.hideLoading();
							}
						}
						//TODO 上传 后面上传到服务器 就传fangXingImg、huXingImg这个数组里保存的临时路径获取						
					}
				})
			},
			//删除上传
			deletePic(type, index) {
				if (type === 'fangXingImg') {
					this.fangXingImg.splice(index, 1)
				} else {
					this.huXingImg.splice(index, 1)
				}
			},
			//点击打开预览
			preViewImg(type, currentSrc) {
				uni.previewImage({
					current: currentSrc,
					urls: type == 'fangXingImg' ? this.fangXingImg : this.huXingImg //需要预览的图片链接列表	
				})
			}
		},

		// 计算属性
		computed: {

		},
		// 侦听器
		watch: {

		},
		// 页面隐藏
		onHide() {

		},
		// 页面卸载
		onUnload() {

		},
	}
</script>

<style lang="scss" scoped>
	.register {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background: #F6F6F6;

		.redPacket {
			width: 100%;
			height: 100%;

			.bg {
				width: 100%;
				height: 100%;
				background: #000;
				position: fixed;
				top: 0;
				left: 0;
				opacity: 0.5;
				z-index: 99999;
			}

			.main {
				width: 578rpx;
				height: 956rpx;
				position: fixed;
				top: 50%;
				left: 50%;
				margin-left: -289rpx;
				margin-top: -478rpx;
				z-index: 999999;

				.cen {
					width: 578rpx;
					height: 956rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;

					.bgImg {
						position: absolute;
						top: 0;
						z-index: -1;
						width: 100%;
						height: 100%;
					}

					.logoImg {
						width: 245rpx;
						height: 119rpx;
						margin-top: 139rpx;
						margin-bottom: 50rpx;
					}

					.txt {
						font-size: 44rpx;
						color: #FFE993;
						margin-bottom: 318rpx;
					}

					.openImg {
						width: 180rpx;
						height: 180rpx;
					}
				}

				// background-image: url(../../static/img/bghb.png);
			}

		}

		.registerBox {
			.hintBox {
				height: 80rpx;
				background: #FFEEEE;
				margin-bottom: 20rpx;

				.img {
					width: 30rpx !important;
					height: 30rpx !important;
					margin-right: 16rpx;
					margin-left: 30rpx;
				}

				.txt {
					font-size: 26rpx;
					color: #222222;
				}
			}

			.info {
				margin-left: 30rpx;
				margin-right: 30rpx;
				background: #fff;
				border-radius: 20rpx;

				.address {
					margin-left: 30rpx;
					margin-right: 30rpx;
					height: 110rpx;
					border-bottom: 1rpx solid #ECECEC;

					.txt {
						width: 239rpx;
						font-size: 30rpx;
						color: #222222;
						text-align: left;
					}

					.put {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.txtRss {
							font-size: 30rpx;
							color: #CCCCCC;
						}

						.RiImg {
							width: 15rpx;
							height: 26rpx;
						}
					}
				}

				.cardTxt {
					margin-left: 30rpx;
					height: 110rpx;
					line-height: 110rpx;
				}

				.houseType {
					overflow: hidden;
					margin-left: 30rpx;

					.houseImg {
						width: 195rpx;
						height: 195rpx;
						border: 1rpx solid #ECECEC;
						border-radius: 10rpx;
						position: relative;
						float: left;
						margin-right: 20rpx;
						margin-bottom: 20rpx;

						.img {
							width: 195rpx !important;
							height: 195rpx !important;
						}

						.deleteImg {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							right: 10rpx;
							top: 10rpx;
						}
					}

					.addImg {
						width: 196rpx;
						height: 196rpx;
						background: #F6F6F6;
						margin-bottom: 20rpx;

						.img {
							width: 63rpx;
							height: 63rpx;
						}

						.txt {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

				.border {
					margin-left: 30rpx;
					margin-right: 30rpx;
					margin-top: 34rpx;
					border-bottom: 1rpx solid #ECECEC;
				}

				.average {
					height: 170rpx;
					// border-bottom: 1px solid #ECECEC;

					.txt {
						width: 90rpx;
						font-size: 30rpx;
						color: #222222;
						text-align: left;
						margin-left: 30rpx;
					}

					.areaBox {
						display: flex;
						flex-direction: column;

						.put {
							margin-bottom: 18rpx;

							input {
								max-width: 150rpx;
								height: 42rpx;
								line-height: 42rpx;
								font-size: 30rpx;
								color: #222222;
								margin-left: 30rpx;
								// background: red;
							}

							.txt01 {
								font-size: 30rpx;
								color: #222222;
								margin-left: 30rpx;
							}
						}
					}

				}
			}

			.selection {
				margin-top: 20rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				padding-top: 29rpx;
				padding-bottom: 30rpx;
				background: #fff;
				border-radius: 20rpx;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: #222222;
					margin-left: 30rpx;
					margin-right: 30rpx;
					padding-bottom: 29rpx;
					border-bottom: 1rpx solid #ECECEC;

					.border {
						width: 6rpx;
						height: 30rpx;
						background: #4281EA;
						border-radius: 4rpx;
						margin-right: 24rpx;
					}
				}

				.multipleChoice {
					.label-list {
						margin-left: 30rpx;
						margin-right: 30rpx;
						height: 42rpx;
						padding-bottom: 34rpx;
						padding-top: 34rpx;
						font-size: 30rpx;
						color: #222222;
						border-bottom: 1rpx solid #ECECEC;
						background-image: url(../../static/img/btn_xz.png);
						background-position: left;
						background-size: 38rpx 38rpx;
						background-repeat: no-repeat;
						text-indent: 60rpx;
					}

					.active {
						color: #4281EA !important;
						background-image: url(../../static/img/btn_yxz.png) !important;
					}

					.textareaTxt {
						margin-top: 30rpx;
						margin-left: 30rpx;
						margin-right: 30rpx;
						height: 254rpx;
						background: #F6F6F6;
						border-radius: 10rpx;

						.textarea {
							width: 93%;
							height: 181rpx;
							padding-left: 20rpx;
							padding-right: 20rpx;
							padding-top: 20rpx;
							font-size: 28rpx;
							color: #222222;
						}

						.numTxt {
							font-size: 30rpx;
							color: #CCCCCC;
							text-align: right;
							padding-bottom: 20rpx;
							margin-right: 30rpx;
						}
					}
				}
			}
		}

		.bottom {
			width: 100%;
			height: 132rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			z-index: 999;
			// margin-bottom: 22rpx;
			// margin-top: 100rpx;

			.entryLr {
				width: 240rpx;
				height: 80rpx;
				line-height: 80rpx;
				border: 2rpx solid #4281EA;
				border-radius: 20rpx;
				text-align: center;
				font-size: 30rpx;
				color: #4281EA;
				margin-left: 30rpx;
			}

			.submitIn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(89deg, #6363F2 0%, #4281EA 100%);
				border-radius: 20rpx;
				text-align: center;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-left: 20rpx;
				margin-right: 30rpx;
			}
		}

	}
</style>

直接预览大图：

<view class="imageList">
	<image :src="item" :data-src="item" mode="aspectFill" class="img" v-for="(item,index) in imageList" :key="index" @click="previewImage(item)"></image>
</view>

imageList: [
	'https://img-blog.csdnimg.cn/img_convert/6841510d3d8d627896a7b742a5ecf87e.gif',
	'http://img.touxiangwu.com/2020/3/uq6Bja.jpg',
	'http://www.jq22.com/img/cs/500x500-9.png',
	'https://picsum.photos/1250/650',
],

previewImage(currentSrc) {
		console.log(currentSrc,'currentSrc')
		let that = this;
		uni.previewImage({
			current: currentSrc, // 这是图片地址
			urls: that.imageList, // 需要预览的图片列表
		});
},