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
Table of contents Install Importing components Ba...
Solution to the problem that there is no unzip co...
This article shares a collection of Java problems...
Table of contents 1. Event Processing Model 1. Ev...
In actual development or production environments,...
Table of contents Preliminary Notes Problem Repro...
Preface The server used by the blogger was purcha...
Table of contents Preface 1. Trigger Overview 2. ...
In the Linux environment, you want to check wheth...
I often see some circular wave graphics on mobile...
A while ago, I wrote a blog post titled "Can...
Detailed explanation of the usage of DECIMAL in M...
Let me first introduce an interesting property - ...
I accidentally discovered a great artificial inte...
You can call it directly in the Linux shell envir...