Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shady-xia/vue-uploader-solutions
Vue上传解决方案
https://github.com/shady-xia/vue-uploader-solutions
uploader vue vue2
Last synced: about 1 month ago
JSON representation
Vue上传解决方案
- Host: GitHub
- URL: https://github.com/shady-xia/vue-uploader-solutions
- Owner: shady-xia
- License: other
- Created: 2018-03-08T08:24:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-17T05:43:38.000Z (about 2 years ago)
- Last Synced: 2024-09-27T14:03:32.093Z (about 2 months ago)
- Topics: uploader, vue, vue2
- Language: Vue
- Homepage: https://shady-xia.github.io/vue-uploader-solutions
- Size: 2.16 MB
- Stars: 520
- Watchers: 10
- Forks: 490
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue uploader solutions
Vue上传的解决方案
目前主要处理 `vue-simple-uploader` 的方案，基于 `vue-simple-uploader` 封装了可以分片、秒传及断点续传的上传插件
预览：[https://shady-xia.github.io/vue-uploader-solutions](https://shady-xia.github.io/vue-uploader-solutions)
基于vue3的版本：[https://github.com/shady-xia/vue-uploader-solutions-next](https://github.com/shady-xia/vue-uploader-solutions-next)
## 文章
该仓库有对应的文章进行分析：
[基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件](https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html)
[vue-simple-uploader 常见问题整理](https://www.cnblogs.com/xiahj/p/15950975.html)
## 本地调试
**前端服务**：
```bash
npm install
npm start
# or
npm run serve
```
前端服务默认打开8080端口
**node服务端**
```bash
cd server
npm install
npm run server
```
node服务会打开3000端口，临时文件存在 tmp 目录下，上传成功的文件存在 uploads 目录下
## 插件的封装及使用
### GlobalUploader
`GlobalUploader.vue` 为基于 `vue-simple-uploader` 二次封装的上传插件，源码路径为 `/vue-simple-uploader/GlobalUploader.vue`
它有两种使用方式：
### 通过bus作为全局组件使用
作为全局上传组件使用时，将组件注册在`App.vue`中，通过 `Event Bus` 的方式调用插件。
使用场景为：上传器为整个网站级别的，切换路由时不打断上传流程，上传窗口始终存在于网站右下角。
**打开上传器**
调用`Bus.$emit('openUploader')`，打开上传器，弹出选择文件窗口，该函数有两个参数：
* params：传给服务端的额外参数
* options：上传选项，目前支持 target、testChunks、mergeFn、accept
```js
Bus.$emit('openUploader', {
params: {
page: 'home'
},
options: {
target: 'http://10.0.0.10'
}
})
```
**Bus Events**
* fileAdded：文件选择后的回调
* fileSuccess：文件上传成功的回调
```js
// 文件选择后的回调
Bus.$on('fileAdded', () => {
console.log('文件已选择')
})
// 文件上传成功的回调
Bus.$on('fileSuccess', () => {
console.log('文件上传成功')
})
```
### 作为普通组件在单个页面中使用
使用场景为：在单个页面中使用上传器
props：
* global：请务必设置为 `false`，代表非全局
* params：（同用法一）传给服务端的额外参数
* options：（同用法一）上传选项，目前支持 target、testChunks、mergeFn、accept
events:
* fileAdded：文件选择后的回调
* fileSuccess：文件上传成功的回调
```html
```
## 其他上传器
### vue-webuploader（已不推荐）
见文章：
[Vue2.0结合webuploader实现文件分片上传](https://www.cnblogs.com/xiahj/p/8529545.html)
## License
请捍卫自己作为劳动者的权利
[](https://github.com/996icu/996.ICU/blob/master/LICENSE)
[](https://996.icu)