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

Several CSS3 tag shorthands (recommended)

border-radius: CSS3 rounded corners Syntax: borde...

How to use VirtualBox to build a local virtual machine environment on Mac

1. Big Data and Hadoop To study and learn about b...

How to modify iTunes backup path under Windows

0. Preparation: • Close iTunes • Kill the service...

CSS to achieve floating customer service effect

<div class="sideBar"> <div>...

MySQL 5.7.18 winx64 installation and configuration method graphic tutorial

The installation of compressed packages has chang...

Tutorial on setting up scheduled tasks to backup the Oracle database under Linux

1. Check the character set of the database The ch...

How to select all child elements and add styles to them in CSS

method: Take less in the actual project as an exa...

IE8 uses multi-compatibility mode to display web pages normally

IE8 will have multiple compatibility modes . IE pl...

How to use css variables in JS

How to use css variables in JS Use the :export ke...

Native js to realize bouncing ball

On a whim, I wrote a case study of a small ball b...

MySQL 5.7.10 installation and configuration tutorial under Windows

MySQL provides two different versions for differe...

Specific use of Node.js package manager npm

Table of contents Purpose npm init and package.js...