Vue Multiple Image Upload (v1.0.10)

Welcome Back

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 an image Preview, Resize, Remove, Add More, Drag & Drop features are included.

You can also limit the maximun number of file upload, the Image size , the Image type.

I add new feature alert Box, Resize Image, Preview also can be resize in version 1.0.8;

Here is Live Demo

Watch Now Live Demo.

Installation

``NPM
npm i @zakerxa/vue-multiple-image-upload
`

Setup

1 - Import the vue component locally in the script Tag

`Vue

`
OR
Global registration in your main.js

`Javascript
import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
const app = createApp(App);
app.component("vue-multi-image-upload", VueMultiImageUpload);

`

2 - In your Vue Template

`Vue

`

⇃⇃⇃⇃⇂⇂⇂⇂

`Vue

`

Props & Type

Explanation of usage

1.Images methods can listen child input data from parent the component.
`
@data-image="images"
images(e){
e.map(res=>console.log(res))
}
`

2.We can Resize the images by adding resize props
`
:resize={ h:500, w:500 ,keepRatio:true}
h => max-height of the image
w => max-width of the image

keepRatio true can resize your image without losing distortion
keepRatio false can resize your image exactly width & height

Default is False
`


3.We can limit the number of image to upload maximun
`
:max="limitNumber"
`

4.We can also limit the images size & type.
`
:image-size="imageSize" :accept="imageType"

this.imageSize = 2e6; // 2MB
ImageSize only allow 2MB else We will show alert msg to user.

this.imageType = ['image/jpeg', 'image/png', 'image/gif'];
imageType should be inside an array
`

5.And, There is one options.Options can change the message inputBox.
`
:options="options"
this.options.max = "Max";
this.options.ready = "Ready";
this.options.select = "Choosed";
`

6.If you want to reset child component data,You can use :data-reset props to passing Object
`
:data-reset="components"
this.component.clear = true;
`

Final State

That's all what you need

`Vue


``