本文实例为大家分享了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实现添加与删除图书功能
- 基于VUE选择上传图片并页面显示(图片可删除)
- vue图片加载与显示默认图片实例代码
- Vue实现点击显示不同图片的效果
- vue+springboot图片上传和显示的示例代码
- Vue+Vant 图片上传加显示的案例
- 基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
- Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
- Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
- vue上传图片到oss的方法示例(图片带有删除功能)
本文由 华域联盟 原创撰写:华域联盟 » Vue实现多图添加显示和删除
转载请保留出处和原文链接:https://www.cnhackhy.com/67040.htm