Skip to content

Commit f28c9f6

Browse files
lian-yuelian-yue
committed
v0.1.0
1 parent 130bdf1 commit f28c9f6

File tree

9 files changed

+835
-0
lines changed

9 files changed

+835
-0
lines changed

‎.babelrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": ["es2015", "stage-2"],
3+
"plugins": ["transform-runtime"],
4+
"comments": false
5+
}

‎README.md

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# vue-upload-component
2+
3+
> Vue.js file upload component, Support for multiple file uploads, progress, html4, ie9
4+
**Html4 does not support the progress bar, file size, timeout, headers, response status code error of judgment**
5+
6+
7+
8+
## Install
9+
10+
``` bash
11+
npm install vue-upload-component --save
12+
```
13+
14+
15+
## Demo
16+
``` html
17+
18+
<div id="app">
19+
<file-upload title="Add upload files"></file-upload>
20+
</div>
21+
22+
<script type="text/javascript">
23+
var FileUpload = require('./FileUpload.vue');
24+
25+
new Vue({
26+
el:'#app',
27+
components: {
28+
FileUpload:FileUpload,
29+
},
30+
});
31+
</script>
32+
```
33+
34+
35+
36+
## Build Setup
37+
38+
``` bash
39+
# install dependencies
40+
npm install
41+
42+
# serve with hot reload at localhost:8080
43+
npm run dev
44+
45+
# build for production with minification
46+
npm run build
47+
```
48+
49+
50+
## Dispatch
51+
addFileUpload
52+
53+
removeFileUpload
54+
55+
fileUploadProgress
56+
57+
beforeFileUpload
58+
59+
afterFileUpload
60+
61+
62+
63+
64+
## Setting
65+
66+
### Data
67+
``` json
68+
{
69+
files: [{
70+
//
71+
request: {
72+
headers: {
73+
"X-Csrf-Token": "xxxx",
74+
},
75+
data: {
76+
"_csrf_token": "xxxxxx",
77+
},
78+
},
79+
}],
80+
81+
// Global
82+
request: {
83+
headers: {
84+
"X-Csrf-Token": "xxxx",
85+
},
86+
data: {
87+
"_csrf_token": "xxxxxx",
88+
},
89+
},
90+
}
91+
```
92+
93+
94+
### Props
95+
``` html
96+
<file-upload :title="Add upload files" :name="file" :action="./upload.php" :accept="accept" :multiple="multiple" :size="size" :timeout="3600000"></file-upload>
97+
```

‎dist/build.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/build.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue-upload-component</title>
6+
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
7+
<style type="text/css">
8+
.file-uploads-label span{
9+
font-size: 18px;
10+
padding: 1em;
11+
font-weight: bold;
12+
border: 1px solid #888;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="app">
18+
<table style="width: 100%; border: 1px solid #ddd;" v-if="$refs.upload && $refs.upload.files">
19+
<thead>
20+
<tr>
21+
<th>Index</th>
22+
<th>Name</th>
23+
<th>Size</th>
24+
<th>Progress</th>
25+
<th>Active</th>
26+
<th>Error</th>
27+
<th>Errno</th>
28+
<th>Success</th>
29+
<th>Abort</th>
30+
<th>Delete</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr v-for="file in $refs.upload.files">
35+
<td>{{$index}}</td>
36+
<td>{{file.name}}</td>
37+
<td>{{file.size}}</td>
38+
<td>{{file.progress}}</td>
39+
<td>{{file.active}}</td>
40+
<td>{{file.error}}</td>
41+
<td>{{file.errno}}</td>
42+
<td>{{file.success}}</td>
43+
<td @click="file.active = false">Abort</td>
44+
<td @click="remove(file)">x</td>
45+
</tr>
46+
</tbody>
47+
</table>
48+
<br/>
49+
<br/>
50+
<table style="width: 100%; border: 1px solid #ddd;" >
51+
<tbody>
52+
<tr>
53+
<td>
54+
<file-upload title="Add upload files" name="file" action="./upload.php" :accept="accept" :multiple="multiple ? 'true' : null" :size="size" v-ref:upload></file-upload>
55+
</td>
56+
<td>
57+
<button v-if="$refs.upload && $refs.upload.active" type="submit" @click.prevent="$refs.upload.active = !$refs.upload.active">Stop upload</button>
58+
<button v-else type="submit" @click.prevent="$refs.upload.active = !$refs.upload.active">Start upload</button>
59+
</td>
60+
<td>
61+
Accept: <input type="text" v-model="accept">
62+
</td>
63+
<td>
64+
Max file size: <input type="text" v-model="size">
65+
</td>
66+
<td>
67+
Multiple: <input type="checkbox" id="checkbox" v-model="multiple">
68+
</td>
69+
<td>
70+
Status: Active: {{$refs.upload.active}}, Uploaded: {{$refs.upload.uploaded}}
71+
</td>
72+
</tr>
73+
</tbody>
74+
</table>
75+
</div>
76+
<script src="./dist/build.js"></script>
77+
</body>
78+
</html>

‎package.json

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "vue-upload-component",
3+
"description": "Vue.js file upload component, Support for multiple file uploads, progress, html4, ie9",
4+
"version": "0.1.0",
5+
"author": "LianYue",
6+
"scripts": {
7+
"dev": "webpack-dev-server --inline --hot",
8+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
9+
},
10+
"main": "/src/FileUpload.vue",
11+
"repository": {
12+
"type": "git",
13+
"url": "git+https://github.com/lian-yue/vue-upload-component.git"
14+
},
15+
"keywords": [
16+
"Vue.js",
17+
"File",
18+
"Upload",
19+
"Uploads",
20+
"Multiple",
21+
"Component"
22+
],
23+
"author": "LianYue",
24+
"license": "Apache-2.0",
25+
"bugs": {
26+
"url": "https://github.com/lian-yue/vue-upload-component/issues"
27+
},
28+
"homepage": "https://github.com/lian-yue/vue-upload-component#readme",
29+
"dependencies": {
30+
"babel-runtime": "^6.0.0"
31+
},
32+
"devDependencies": {
33+
"babel-core": "^6.0.0",
34+
"babel-loader": "^6.0.0",
35+
"babel-plugin-transform-runtime": "^6.0.0",
36+
"babel-preset-es2015": "^6.0.0",
37+
"babel-preset-stage-2": "^6.0.0",
38+
"cross-env": "^1.0.6",
39+
"css-loader": "^0.23.0",
40+
"file-loader": "^0.8.4",
41+
"json-loader": "^0.5.4",
42+
"url-loader": "^0.5.7",
43+
"vue-hot-reload-api": "^1.2.0",
44+
"vue-html-loader": "^1.0.0",
45+
"vue-loader": "^8.2.1",
46+
"vue-style-loader": "^1.0.0",
47+
"webpack": "^1.12.2",
48+
"webpack-dev-server": "^1.12.0"
49+
}
50+
}

0 commit comments

Comments
 (0)