Vue.js file upload component, Support for multiple file uploads, progress, html4, ie9 Html4 does not support the progress bar, file size, accept, timeout, headers, response status code error of judgment
npm install vue-upload-component --save
var FileUpload = require('vue-upload-component');
new Vue({
template: '<file-upload v-model="files" post-action="/post.method" put-action="/put.method">Upload file</file-upload>',
components: {
FileUpload: FileUpload
}
})
import FileUpload from 'vue-upload-component'
new Vue({
template: '<file-upload v-model="files" post-action="/post.method" put-action="/put.method">Upload file</file-upload>',
components: {
FileUpload
}
})
import FileUpload from 'vue-upload-component/src'
var nodeExternals = require('webpack-node-externals');
{
//.....
externals: [
nodeExternals({whitelist:[/^vue-upload-component/]})
]
//.....
}
https://lian-yue.github.io/vue-upload-component/
https://github.com/lian-yue/vue-upload-component/tree/2.0/example/
<div id="app">
<file-upload v-model="files" post-action="/post.method" put-action="/put.method">Upload file</file-upload>
</div>
<script type="text/javascript">
var FileUpload = require('vue-upload-component');
new Vue({
el:'#app',
data() {
return {
files: [],
}
},
components: {
FileUpload: FileUpload,
},
});
</script>
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
<file-upload
name="post file name"
drop="Boolean (true = $parent) or Element or Css Selector"
dropDirectory="true or false"
extensions="Array or String or Regular"
post-action="./post.method"
put-action="./put.method"
accept="accept"
multiple="true or false"
directory="true or false"
size="max Size"
timeout="3600000"
headers="Request headers object"
data="Request data object"
thread="Number (Multi-file uploads at the same time)"
filter="Function(file) (Custom upload filters)"
value="Upload files"
v-model="files"
@input="Function(files)"
@input-file="Function(newFile, oldFile)"
>
Add Files
</file-upload>
[
{
id: 'String', // Read only
name: 'filename String',
size: 'filesize Number', // -1 = html4
progress: 'progress String', // Read only
speed: "Speed Number", // Read only
active: 'active Boolean', // set active = fasle abort upload
error: 'error String', // Read only
success: 'success Boolean', // Read only
response: 'Response data Object or String', // Read only
putAction: 'String uri',
postAction: 'String uri',
timeout: "Number",
headers: {
"X-Csrf-Token": "xxxx",
},
data: {
"_csrf_token": "xxxxxx",
},
xhr: "False or XMLHttpRequest object", // html5
iframe: "False or Element object", // html4
file: "undefined or File object" // html5
el: "undefined or Input object"
}
]
{
mode: 'html5', // html5 or html4
active: false, // set active = false abort upload
uploaded: true, // Read only
dropActive: false, // Read only
destroy: false, // Read only Component destroy = true
}
clear()
get(id or file Object)
add(window.File Object or object)
update(id or file Object, data)
remove(id or file Object)
```