Skip to content

Commit d216950

Browse files
author
郑飞杰
committed
init
1 parent c439416 commit d216950

File tree

11 files changed

+405
-0
lines changed

11 files changed

+405
-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": [
3+
"@babel/preset-env"
4+
]
5+
}

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎README.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,100 @@
11
# vue-uploadfile
2+
23
上传文件、本地展示（Vue组件）
4+
5+
1. npm：<https://www.npmjs.com/package/vue-uploadfile>
6+
2. demo：<https://realgeoffrey.github.io/vue-uploadfile/demo/index.html>
7+
8+
### 安装
9+
1. Node.js安装
10+
11+
```bash
12+
npm install vue-uploadfile --save
13+
```
14+
2. 浏览器引用
15+
16+
```html
17+
<!-- 需要先引入vue：<script src="//unpkg.com/vue"></script> -->
18+
<script src="//unpkg.com/vue-uploadfile"></script>
19+
```
20+
21+
### 注册组件
22+
1. Node.js注册
23+
24+
1. 全局注册
25+
26+
```javascript
27+
import Vue from 'vue'
28+
import vueUploadfile from 'vue-uploadfile'
29+
30+
// 全局注册
31+
Vue.use(vueUploadfile, { component: 'VueUploadfile' }) // 组件名默认是：vue-uploadfile
32+
// 或：Vue.component('VueUploadfile', vueUploadfile)
33+
```
34+
2. 局部注册
35+
36+
```javascript
37+
import vueUploadfile from 'vue-uploadfile'
38+
39+
export default {
40+
components: {
41+
// 局部注册
42+
VueUploadfile: vueUploadfile
43+
}
44+
}
45+
```
46+
2. 浏览器注册
47+
48+
1. 全局注册
49+
50+
```html
51+
<!-- 需要先引入vue：<script src="//unpkg.com/vue"></script> -->
52+
<!-- 需要先引入vue-uploadfile：<script src="//unpkg.com/vue-uploadfile"></script> -->
53+
54+
<script>
55+
// 全局注册
56+
Vue.use(vueUploadfile, { component: 'vue-uploadfile' }) // 组件名默认是：vue-uploadfile
57+
// 或：Vue.component('vue-uploadfile', vueUploadfile)
58+
</script>
59+
```
60+
2. 局部注册
61+
62+
```html
63+
<!-- 需要先引入vue：<script src="//unpkg.com/vue"></script> -->
64+
<!-- 需要先引入vue-uploadfile：<script src="//unpkg.com/vue-uploadfile"></script> -->
65+
66+
<script>
67+
new Vue({
68+
components: {
69+
// 局部注册
70+
'vue-uploadfile': vueUploadfile
71+
}
72+
})
73+
</script>
74+
```
75+
76+
### 用法
77+
1. 参数
78+
79+
```vue
80+
<VueUploadfile
81+
accept="input的accept属性"
82+
:max-size="文件大小上限-M（0，无上限）"
83+
allow-blob-url="是否输出Blob URL（true）"
84+
allow-base64="是否输出base64（true）"
85+
@error="文件大小超过上限回调的方法，带参数{ msg }"
86+
@update="input的change事件后改变了file的回调的方法，带参数{ file, blobUrl, base64 }"
87+
/>
88+
```
89+
2. 插槽
90+
91+
```vue
92+
<VueUploadfile
93+
v-slot="fileData"
94+
>
95+
文件-><br>
96+
{{ fileData.file && fileData.file.name }}<br>
97+
{{ fileData.blobUrl }}<br>
98+
{{ fileData.base64 }}
99+
</VueUploadfile>
100+
```

‎build/rollup.config.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import VuePlugin from 'rollup-plugin-vue'
2+
import babel from 'rollup-plugin-babel'
3+
import babelrc from 'babelrc-rollup'
4+
import commonjs from 'rollup-plugin-commonjs'
5+
import { terser } from 'rollup-plugin-terser'
6+
7+
const config = {
8+
input: 'src/index.js',
9+
plugins: [
10+
VuePlugin(),
11+
babel({
12+
...babelrc({
13+
addExternalHelpersPlugin: false
14+
}),
15+
exclude: 'node_modules/**'
16+
}),
17+
commonjs({
18+
include: 'node_modules/**'
19+
}),
20+
terser()
21+
]
22+
}
23+
24+
export default [
25+
{
26+
...config,
27+
output: {
28+
format: 'cjs', // CommonJS
29+
file: 'dist/vue-uploadfile.cjs.js'
30+
}
31+
},
32+
{
33+
...config,
34+
output: {
35+
format: 'esm', // ES6 module
36+
file: 'dist/vue-uploadfile.esm.js'
37+
}
38+
},
39+
{
40+
...config,
41+
output: {
42+
format: 'iife', // <script>引用
43+
file: 'dist/vue-uploadfile.iife.js',
44+
name: 'vueUploadfile'
45+
}
46+
}
47+
]

‎demo/index.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>demo for vue-uploadfile</title>
6+
<style>
7+
img[src=""],
8+
img:not([src]),
9+
video[src=""],
10+
video:not([src]) {
11+
visibility: hidden;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div id="app">
17+
图片（accept="image/*"）：
18+
<vue-uploadfile
19+
:max-size="1"
20+
@error="error1"
21+
@update="update1"
22+
accept="image/*"
23+
>
24+
</vue-uploadfile>
25+
<br>
26+
<img :src="src1.blobUrl" alt="上传图片预览(blobUrl)" height="250">
27+
<img :src="src1.base64" alt="上传图片预览(base64)" height="250">
28+
29+
<hr>
30+
31+
视频（accept="video/*"）：
32+
<vue-uploadfile
33+
:allow-base64="false"
34+
@update="update2"
35+
accept="video/*"
36+
>
37+
</vue-uploadfile>
38+
<br>
39+
<video :src="src2.blobUrl" controls="controls" height="250"></video>
40+
41+
<hr>
42+
43+
<vue-uploadfile
44+
v-slot="fileData"
45+
>
46+
文件-><br>
47+
{{ fileData.file && fileData.file.name }}<br>
48+
{{ fileData.blobUrl }}<br>
49+
{{ fileData.base64 }}
50+
</vue-uploadfile>
51+
52+
</div>
53+
54+
<script src="//unpkg.com/vue"></script>
55+
<!-- <script src="//unpkg.com/vue-uploadfile"></script>-->
56+
<script src="/dist/vue-uploadfile.iife.js"></script>
57+
58+
<script>
59+
// 全局注册
60+
// Vue.use(vueUploadfile, { component: 'vue-uploadfile' })
61+
// 或：
62+
// Vue.component('vue-uploadfile', vueUploadfile)
63+
64+
new Vue({
65+
components: {
66+
// 局部注册
67+
'vue-uploadfile': vueUploadfile
68+
},
69+
el: '#app',
70+
data () {
71+
return {
72+
src1: {
73+
file: '',
74+
blobUrl: '',
75+
base64: ''
76+
},
77+
src2: {
78+
file: '',
79+
blobUrl: '',
80+
base64: ''
81+
}
82+
}
83+
},
84+
methods: {
85+
error1 (data) {
86+
console.error('error1', data)
87+
},
88+
update1 (data) {
89+
console.info('update1', data)
90+
this.src1 = data
91+
},
92+
update2 (data) {
93+
console.info('update2', data)
94+
this.src2 = data
95+
}
96+
}
97+
})
98+
</script>
99+
</body>
100+
</html>

‎dist/vue-uploadfile.cjs.js‎

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

‎dist/vue-uploadfile.esm.js‎

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

‎dist/vue-uploadfile.iife.js‎

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

‎package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "vue-uploadfile",
3+
"description": "上传文件、本地展示（Vue组件）",
4+
"repository": {
5+
"type": "git",
6+
"url": "git@github.com:realgeoffrey/vue-uploadfile.git"
7+
},
8+
"keywords": [
9+
"vue",
10+
"uploader",
11+
"vue-uploader"
12+
],
13+
"author": "realgeoffrey",
14+
"license": "MIT",
15+
"homepage": "https://github.com/realgeoffrey/vue-uploadfile#readme",
16+
"bugs": {
17+
"url": "https://github.com/realgeoffrey/vue-uploadfile/issues"
18+
},
19+
"main": "dist/vue-uploadfile.cjs.js",
20+
"module": "dist/vue-uploadfile.esm.js",
21+
"unpkg": "dist/vue-uploadfile.iife.js",
22+
"jsdelivr": "dist/vue-uploadfile.iife.js",
23+
"scripts": {
24+
"build": "rollup --config ./build/rollup.config.js "
25+
},
26+
"dependencies": {},
27+
"devDependencies": {
28+
"@babel/core": "^7.7.2",
29+
"@babel/preset-env": "^7.7.1",
30+
"babelrc-rollup": "^3.0.0",
31+
"rollup": "^1.27.2",
32+
"rollup-plugin-babel": "^4.3.3",
33+
"rollup-plugin-commonjs": "^10.1.0",
34+
"rollup-plugin-terser": "^5.1.2",
35+
"rollup-plugin-vue": "5.0.1",
36+
"vue-template-compiler": "^2.6.10"
37+
},
38+
"version": "1.0.0"
39+
}

‎src/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import vueUploadfile from './vue-uploadfile.vue'
2+
3+
vueUploadfile.install = (Vue, options = {}) => {
4+
Vue.component(options.component || 'vue-uploadfile', vueUploadfile)
5+
}
6+
7+
export default vueUploadfile

0 commit comments

Comments
 (0)