Vue多图添加显示和删除

效果图：

首先给一个input[type="file"]，然后隐藏掉，当点击加号所在的区域时，触发文件选择的点击事件。

注意：取src的值时用v-bind:src="imgsrc";用src="imgsrc"或者src="{{imgsrc}}"会报错。

代码：（有些样式省略，主要是添加和删除方法）

<template>
	<div id="originality">
				<div class="ipt">主图：</div>
				<div class="picture">
					<div class="Mainpicture">
						<div class="iconfont icon-jia" @click="uploadPic('filed')"></div>
					</div>
					<!--主图可以添加多个图片-->
					<div id="img" v-for="(imgsrc,index) in imgsrcs">
						<img id="imgshow" :src="imgsrc">
						<div class="iconfont icon-cha" @click="deleteMulPic(index)"</div>
					</div>
				</div>
				<input id="filed" type="file" multiple="multiple" accept="image/*,application/pdf" style="display: none;" @change="changeMulPic()">

				
	</div>
</template>

<script>
	export default {
		name: "originality",
		components: {

		},
		data() {
			return {			
				imgsrcs: []
			}
		},
		methods: {
			uploadPic: function(val) {
				document.getElementById(val).click();
			},
			changeMulPic: function() {
				var file = $("#filed").get(0).files[0];
				$("#img").show();
				this.imgsrcs.push(window.URL.createObjectURL(file))
			},
			deleteMulPic: function(index) {
				this.imgsrcs.splice(index, 1);
			}
		}
	}
</script>

<style scoped>
	
	.Mainpicture {
		float: left;
		width: 100px;
		height: 100px;
		background: rgba(255, 255, 255, 1);
		border-radius: 2px;
		border: 1px solid #E5E9F2;
	}
	
	.picture {
		min-height: 100px;
	}
	
	.files {
		display: none;
		float: left;
	}
	
	#img {
		margin-left: 20px;
		float: left;
		width: 100px;
		height: 100px;
		border-radius: 2px;
		border: 1px solid #E5E9F2;
	}
	
	.icon-cha {
		cursor: pointer;
		position: absolute;
		width: 10px;
		height: 10px;
		margin-left: 85px;
		margin-top: -100px;
		color: #BFC5D1;
	}
	
	#imgshow {
		width: 100px;
		height: 100px;
	}
	
	.icon-jia {
		text-align: center;
		width: 20px;
		height: 20px;
		line-height: 20px;
		color: #BFC5D1;
		padding: 40px;
		cursor: pointer;
	}

</style>