An simple file upload component for vue.js.
Checkout Demo on JSFiddle
npm install vue-simple-upload
vue-simple-upload is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, FileUpload will be registered as a global variable.
import FileUpload from 'vue-simple-upload/dist/FileUpload'
export default {
...
components: {
'fileupload': FileUpload
},
...
}After that, you can use it in your templates:
<fileupload target="http://localhost:8000/api/upload" action="POST"></fileupload>var Vue = require('vue')
var FileUpload = require('vue-simple-upload')
var YourComponent = Vue.extend({
...
components: {
'fileupload': FileUpload.FileUpload
},
...
})<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-simple-upload/dist/vue-simple-upload.min.js"></script>
<script>
new Vue({
...
components: {
'fileupload': FileUpload.FileUpload
},
...
})
</script><template>
<fileupload target="http://localhost:8000/api/upload" action="POST" v-on:progress="progress" v-on:start="startUpload" v-on:finish="finishUpload"></fileupload>
</template>
<script>
new Vue({
...
components: {
'fileupload': FileUpload.FileUpload
},
methods: {
startUpload(e) {
// file upload start event
console.log(e);
},
finishUpload(e) {
// file upload finish event
console.log(e);
},
progress(e) {
// file upload progress
// returns false if progress is not computable
console.log(e);
}
}
})
</script>-
target (String): Target endpoint to upload the file
-
action (String): Target action ( POST or PUT )
You can access the file upload events using v-on methods.
- File Upload start event: You can access the start event using v-on:start="startUpload"
methods() {
startUpload(e) {
// start event
}
}- File Upload finish event: You can access the start event using v-on:finish="finishUpload"
methods() {
finishUpload(e) {
// finish event
}
}- File Upload progress event: You can access the file upload progress using v-on:progress="progress"
methods() {
progress(e) {
// listen to file upload progress
}
}- Multi File Upload
Released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent