Vue实现多图添加显示和删除

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Vue实现多图添加显示和删除 的全部内容, 来源链接: utcz.com/p/239241.html

回到顶部