Vue implements adding, displaying and deleting multiple images

Vue implements adding, displaying and deleting multiple images

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:
  • Vue click button to dynamically create and delete component functions
  • Detailed explanation of how to add and delete elements in Vue
  • Vue implements delete element of deleted object
  • Summary of common ways to click and delete in Vue

<<:  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

Recommend

How to use the markdown editor component in Vue3

Table of contents Install Importing components Ba...

How to decompress multiple files using the unzip command in Linux

Solution to the problem that there is no unzip co...

Solution to the problem that Java cannot connect to MySQL 8.0

This article shares a collection of Java problems...

Detailed explanation of Javascript event capture and bubbling methods

Table of contents 1. Event Processing Model 1. Ev...

Docker container orchestration implementation process analysis

In actual development or production environments,...

A brief discussion on the correct approach to MySQL table space recovery

Table of contents Preliminary Notes Problem Repro...

Introduction to the use and advantages and disadvantages of MySQL triggers

Table of contents Preface 1. Trigger Overview 2. ...

Detailed explanation of how to upgrade software package versions under Linux

In the Linux environment, you want to check wheth...

Use CSS to achieve circular wave effect

I often see some circular wave graphics on mobile...

How to find out uncommitted transaction information in MySQL

A while ago, I wrote a blog post titled "Can...

Detailed explanation of the usage of DECIMAL in MySQL data type

Detailed explanation of the usage of DECIMAL in M...

Exploring the practical value of the CSS property *-gradient

Let me first introduce an interesting property - ...

Analysis of HTTP interface testing process based on postman

I accidentally discovered a great artificial inte...

Use of Zabbix Api in Linux shell environment

You can call it directly in the Linux shell envir...