vue-base64-file-upload
Upload files as base64 data-uris (URL representing the file's data as a base64 encoded string).
Install
npm i vue-base64-file-upload --save
Example
import Vue from 'vue'; import VueBase64FileUpload from 'vue-base64-file-upload'; const app = new Vue({ components: { VueBase64FileUpload }, data() { return { customImageMaxSize: 3 // megabytes }; }, methods: { onFile(file) { console.log(file); // file object }, onLoad(dataUri) { console.log(dataUri); // data-uri string }, onSizeExceeded(size) { alert(`Image ${size}Mb size exceeds limits of ${this.customImageMaxSize}Mb!`); } }, template: ` <div class="container"> <h2>Upload file</h2> <vue-base64-file-upload class="v1" accept="image/png,image/jpeg" image-class="v1-image" input-class="v1-input" :max-size="customImageMaxSize" @size-exceeded="onSizeExceeded" @file="onFile" @load="onLoad" /> </div> ` }); app.$mount('#app');
API
Props
image-class
- pass additional classes for previewimg
taginput-class
- pass additional classes for textinput
tagaccept
- mimetypes allowed for upload, defaults to'image/png,image/gif,image/jpeg'
max-size
- number of megabytes allowed for upload, defaults to10
disable-preview
- not show preview image, defaults tofalse
default-preview
- pass url or data-uri to be displayed as default imagefile-name
- pass custom filename to be displayed in textinput
tagplaceholder
- pass placeholder text for textinput
tag
Events
file
- fired when file object is readyload
- fired when data-uri is readysize-exceeded
- fired if uploaded image size exceeds limits
References
MIT Licensed