git
8 years ago
parent
a5a7a7d694
commit
7a3af5e0e6
@ -1,248 +1,35 @@
|
|||||||
# vue-upload-component
|
# vue-upload-component
|
||||||
|
|
||||||
> Vue.js file upload component, Support for multiple file uploads, progress, html4, ie9
|
> Vue.js file upload component
|
||||||
**Html4 does not support the progress bar, file size, accept, timeout, headers, response status code error of judgment**
|
- [x] Multi-file upload
|
||||||
|
- [x] Upload directory
|
||||||
|
- [x] Drag and drop
|
||||||
|
- [x] Drag the directory
|
||||||
## Install
|
- [x] Upload multiple files at the same time
|
||||||
|
- [x] html4 (IE 9)
|
||||||
``` bash
|
- [x] `PUT` method
|
||||||
npm install vue-upload-component --save
|
- [x] Customize the filter
|
||||||
```
|
- [x] thumbnails
|
||||||
|
|
||||||
### HTML
|
|
||||||
```html
|
> Vue.js 文件上传组建
|
||||||
<!DOCTYPE html>
|
- [x] 上传多文件
|
||||||
<html>
|
- [x] 上传目录
|
||||||
<head>
|
- [x] 拖拽
|
||||||
<meta charset="utf-8">
|
- [x] 拖拽目录
|
||||||
<title>Vue-upload-component Test</title>
|
- [x] 多线程
|
||||||
<script src="https://unpkg.com/vue"></script>
|
- [x] html4(IE 9)
|
||||||
<script src="https://unpkg.com/vue-upload-component"></script>
|
- [x] `PUT` 方法
|
||||||
</head>
|
- [x] 自定义过滤器
|
||||||
<body>
|
- [x] 缩略图
|
||||||
<div id="app">
|
|
||||||
<file-upload v-model="files"
|
# 演示 (Example)
|
||||||
post-action="/post.method"
|
|
||||||
put-action="/put.method">Upload file
|
|
||||||
</file-upload>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
new Vue({
|
|
||||||
el: '#app',
|
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
files: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
FileUpload: VueUploadComponent
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
### CommonJS
|
|
||||||
```js
|
|
||||||
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>',
|
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
files: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
FileUpload: FileUpload
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
### ES6
|
|
||||||
```js
|
|
||||||
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>',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
files: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
FileUpload
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
### SSR (Server)
|
|
||||||
```js
|
|
||||||
import FileUpload from 'vue-upload-component/src'
|
|
||||||
```
|
|
||||||
|
|
||||||
#### webpack.config.js
|
|
||||||
```js
|
|
||||||
var nodeExternals = require('webpack-node-externals');
|
|
||||||
{
|
|
||||||
//.....
|
|
||||||
externals: [
|
|
||||||
nodeExternals({whitelist:[/^vue-upload-component/]})
|
|
||||||
]
|
|
||||||
//.....
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
https://lian-yue.github.io/vue-upload-component/
|
https://lian-yue.github.io/vue-upload-component/
|
||||||
|
|
||||||
|
|
||||||
https://github.com/lian-yue/vue-upload-component/tree/2.0/example/
|
# 文档 (Documents)
|
||||||
``` html
|
|
||||||
<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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Build Setup
|
|
||||||
|
|
||||||
``` bash
|
|
||||||
# install dependencies
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# serve with hot reload at localhost:8080
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# build for production with minification
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Setting
|
|
||||||
|
|
||||||
|
|
||||||
## Props
|
|
||||||
``` html
|
|
||||||
<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)"
|
|
||||||
|
|
||||||
v-model="files"
|
|
||||||
|
|
||||||
@input="Function(files)"
|
|
||||||
|
|
||||||
@input-file="Function(newFile, oldFile)"
|
|
||||||
>
|
|
||||||
Add Files
|
|
||||||
</file-upload>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Props value
|
|
||||||
``` js
|
|
||||||
[
|
|
||||||
{
|
|
||||||
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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## data
|
|
||||||
``` js
|
|
||||||
{
|
|
||||||
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
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
**[中文文档](https://github.com/lian-yue/vue-upload-component/tree/2.0/docs/zh-cn/README.md)**
|
||||||
|
|
||||||
## methods
|
**[English document](https://github.com/lian-yue/vue-upload-component/tree/2.0/docs/en/README.md)**
|
||||||
````
|
|
||||||
clear()
|
|
||||||
get(id or file Object)
|
|
||||||
add(window.File Object or object)
|
|
||||||
update(id or file Object, data)
|
|
||||||
remove(id or file Object)
|
|
||||||
```
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue