Vue Multiple Image Upload
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 i @zakerxa/vue-multiple-image-upload
Setup
1 - Import the vue component locally in the script Tag
<script>
import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
export default {
components:{
VueMultiImageUpload
}
}
</script>
OR Global registration in your main.js
import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
const app = createApp(App);
app.component("vue-multi-image-upload", VueMultiImageUpload);
2 - In your Vue Template
<template>
<vue-multi-image-upload @data-image="images" :max="4" :data-reset="component"/>
</template>
⇃⇃⇃⇃⇂⇂⇂⇂
<script>
export default {
data(){
return {
component : {}
},
},
methods:{
images(e){
e.map(res=>console.log(res))
},
clear(){
this.component.clear = true;
}
}
}
</script>
Props & Type
Props | Data Type | Default | Optional | Description |
---|---|---|---|---|
max | Number | 6 | YES | Upload File Limit |
Preview | Object | { h:100, w:100 } | YES | Preview Size h => height |
Resize | Object | No Default | YES | { h:500, w:500 , keepRatio: true} |
imageSize | Number | 4e6 | YES | Image File Size |
alertTimeout | Number | 3e3 (3s) | YES | Alert TimeOut |
accept | Array | [image/png, image/jpg, image/gif] | YES | Image's Format Validate |
dataReset | Object | false | No | Reset the child component data. |
Options | Object | "Maximun","Ready","Selected" | YES | Input Box Message. |
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
<template>
<vue-multi-image-upload
@data-image="images"
:max="4"
:image-size="4e6"
:alert-timeout="3e3"
:accept="imageType"
:preview="{ h:100,w:100 }"
:resize="{ h:500,w:500, keepRatio:true}"
:data-reset="component"
:options="options"
/>
<button @click="clear()">Clear</button>
</template>
<script>
import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
export default {
data(){
return {
component : {},
inputImages : [],
imageType : ['image/jpeg', 'image/png', 'image/gif']
}
},
components:{
VueMultiImageUpload
},
methods:{
images(e){
this.inputImages = e;
},
inputFormData(){
// The way to append images to FormData.
let formData = new FormData();
this.inputImages.map(img => formData.append('images[]',img));
return formData;
},
clear(){
this.component.clear = true;
}
}
}
</script>