Upload files as base64 data-uris (URL representing the file's data as a base64 encoded string).
npm i vue-base64-file-upload --save
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');
image-class- pass additional classes for previewimgtaginput-class- pass additional classes for textinputtagaccept- mimetypes allowed for upload, defaults to'image/png,image/gif,image/jpeg'max-size- number of megabytes allowed for upload, defaults to10disable-preview- not show preview image, defaults tofalsedefault-preview- pass url or data-uri to be displayed as default imagefile-name- pass custom filename to be displayed in textinputtagplaceholder- pass placeholder text for textinputtag
file- fired when file object is readyload- fired when data-uri is readysize-exceeded- fired if uploaded image size exceeds limits
MIT Licensed