This article shares the specific code for Vue to add, display and delete multiple images for your reference. The specific content is as follows Effect picture: First, give an input[type="file"] and then hide it. When you click the area where the plus sign is located, the click event for file selection is triggered. Note: When getting the value of src, use v-bind:src="imgsrc"; using src="imgsrc" or src="{{imgsrc}}" will result in an error. Code: (some styles omitted, mainly adding and deleting methods) <template> <div id="originality"> <div class="ipt">Main image:</div> <div class="picture"> <div class="Mainpicture"> <div class="iconfont icon-jia" @click="uploadPic('filed')"></div> </div> <!--You can add multiple pictures to the main picture--> <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> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to install mysql5.7.24 binary version on Centos 7 and how to solve it
>>: Solution to the problem that Docker container cannot be stopped or killed
border-radius: CSS3 rounded corners Syntax: borde...
3. MySQL Data Management The first method: not re...
1. Big Data and Hadoop To study and learn about b...
0. Preparation: • Close iTunes • Kill the service...
1 Check whether the kernel has a tun module modin...
Use stored procedures to start transactions when ...
<div class="sideBar"> <div>...
The installation of compressed packages has chang...
1. Check the character set of the database The ch...
method: Take less in the actual project as an exa...
IE8 will have multiple compatibility modes . IE pl...
How to use css variables in JS Use the :export ke...
On a whim, I wrote a case study of a small ball b...
MySQL provides two different versions for differe...
Table of contents Purpose npm init and package.js...