File uploads is going to be one of the most common features an application will need. The plugin aims to simplify single and multi file uploads.
Install the package via npm.
> sudo npm install @websanova/vue-upload
The default install is for the Vue 3 version with ES6 module syntax.
Check the Vue 3 demo for a fully working example.
import {createApp} from 'vue';
import axios from 'axios';
import App from 'App.vue';
import VueUpload from '@websanova/vue-upload';
import VueUploadHttp from '@websanova/vue-upload/dist/drivers/http/axios.esm.js';
var upload = createUpload({
plugins: {
http: axios
},
drivers: {
http: httpAxios
},
options: {
}
});
createApp(App)
.use(upload)
.mount('#app');
By default importing @websanova/vue-upload will use the Vue 3 version.
To use the Vue 2 version the path must be set. Check the Vue 2 demo for a fully working example.
import Vue from 'vue';
import VueUpload from '@websanova/vue-upload/dist/v2/vue-upload.esm.js';
import VueUploadHttp from '@websanova/vue-upload/dist/drivers/http/axios.esm.js';
Vue.use(VueUpload, {
plugins: {
http: Vue.axios,
}
drivers: {
http: VueUploadHttp
}
options: {
...
}
});
Also supports ES5 require syntax.
var Vue = require('vue');
var VueUpload = require('@websanova/vue-upload/dist/v2/vue-upload.cjs.js');
var VueUploadHttp = require('@websanova/vue-upload/dist/drivers/http/axios.cjs.js');
Vue.use(VueUpload, {
...
});
You will need to hook up an http driver to facilitate requests to the api.
The plugin ships with a vue-resource and Axios driver out of the box.
It's best to take a look at the demo for a complete setup with either plugin.