这篇文章给大家分享的是有关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" @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>感谢各位的阅读！关于“Vue如何实现多图添加显示和删除”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
