How to Implement Multiple Image Upload Mechanism in Vue.js Application

In this tutorial, we are going to implement the multiple-image upload using Vue.js.

The overall multiple image upload mechanism looks like below:

1. Create a sample Vuejs application:

Open the command prompt or terminal and create a project.

vue create vue-multiple-image-upload
  

Select the default option or manually select feature of your own and hit enter.

This will create a Vuejs application, Now go to the project folder. 

cd vue-multiple-image-upload
  

Run the application.

yarn serve //for yarn package manager
    npm run serve //for npm package manager
  

2. Implement Multiple Image Upload Mechanism.

Here, we are using vue-upload-multiple-image component dependency. The advantage of using this dependency is

• Can upload single and multiple images
• Have drag and drop feature
• Can preview the uploaded images
• Can add, edit and delete the uploaded images
• Can be marked as the default or primary image  

Now, add the dependency in our sample application created.

For yarn package manager:

  yarn add vue-upload-multiple-image
  

For npm package manager:

  npm install vue-upload-multiple-image
  

Open the project in your favorite editor. And open the App.vue file or any file where you want to import it.

  import VueUploadMultipleImage from 'vue-upload-multiple-image'
  

Register the component:

  components: {
    VueUploadMultipleImage,
  },
  

Use the component:

 <vue-upload-multiple-image 
    @upload-success="uploadImageSuccess"
    @edit-image="editImage"
    @mark-is-primary="markIsPrimary"
    @limit-exceeded="limitExceeded"
    @before-remove="beforeRemove"
    id-upload="myIdUpload"
    id-edit="myIdEdit"
    :max-image=20
    primary-text="Default"
    browse-text="Browse picture(s)"
    drag-text="Drag pictures"
    mark-is-primary-text="Set as default"
    popup-text="This image will be displayed as default"
    :multiple=true
    :show-edit=true
    :show-delete=true
    :show-add=true
 >
 </vue-upload-multiple-image>
  

Here, all the events and props are implemented.

@upload-success event will be trigger for each image upload.

@edit-image will be trigger when editing an image i.e trying to replace the particular image

@mark-is-primary will be trigger when if you want to mark any image as a default or primary image.

@limit-exceeded will be trigger when the image upload number exceeds that is defined in max-image         props

@before-remove will be trigger when we try to delete the image 

Now let's implement each event function to handle them. In order to do so, use the following functions inside Vuejs methods.

methods: {
    uploadImageSuccess(formData, index, fileList) {
      console.log('data', formData, index, fileList)
      // Upload image api
      // axios.post('http://your-url-upload', formData).then(response => {
      //   console.log(response)
      // })
    },
    beforeRemove(index, removeCallBack) {
      console.log('index', index)
      var r = confirm("remove image")
      if (r == true) {
        removeCallBack()
      }
    },
    editImage(formData, index, fileList) {
      console.log('edit data', formData, index, fileList)
    },
    markIsPrimary(index, fileList){
      console.log('markIsPrimary data', index, fileList)
    },
    limitExceeded(amount){
      console.log('limitExceeded data', amount)
    }
  },
  

Here, you can handle each event triggered. For e.g for uploadImageSuccess function, we can call the endpoint to upload the images.

Now, run the application and test it.

Read More