Vue Component Multiple Image Upload

Welcome

Hello Everyone,My name is Zin Min Htet and here is my Facebook account.

Now, I will show you how to Upload Multiple Image using vue-component.

There is also an image Preview & Remove method.

I hope this can help you a lot with your website.

Installation

1npm i vue-multi-image-upload-mm

Setup

1 - In your script tag import the vue component

1<script>
2 import VueMultiImageUpload from 'vue-multi-image-upload-mm';
3
4  export default {
5    components:{
6      VueMultiImageUpload
7    }
8  }
9</script>

2 - In your Vue Template

1<template>
2    <vue-multi-image-upload @data-image="images" :max="4" :data-reset="component"/>
3</template>

How it works

11.Images methods can listen child input data from parent component.
22.We can also limit the number of images upload to maximun , :max="limitNumber".
33.If you want to reset child componet data,You can use :data-reset props to passing Object

⇃⇃⇃⇃⇂⇂⇂⇂

1<script>
2export default {
3    data(){
4      return {
5        component : {}
6      }
7    },
8    methods:{
9        images(e){
10          e.map(res=>console.log(res))
11        },
12        clear(){
13          this.component.clear = true;
14        }
15    }
16}
17
18</script>

Usage

That's all what you need

1<template>
2   <vue-multi-image-upload @data-image="images" :max="4" :data-reset="component" :options="options"/>
3   <button @click="component.clear = true">Clear</button>
4</template>

1<script>
2
3import VueMultiImageUpload from 'vue-multi-image-upload-mm';
4
5export default {
6    data(){
7        return {
8          component : {},
9          options : {
10            max:'Limit',
11            select:'Choosed',
12            ready:'Ready'
13          }
14        }
15    },
16    components:{
17      VueMultiImageUpload
18    },
19    methods:{
20      images(e){
21        let images = [];
22        e.map(res=> images.push(res));
23        console.log(images);
24      }
25    }
26}
27</script>
28