Vue上传的解决方案
目前主要处理 vue-simple-uploader 的方案，基于 vue-simple-uploader 封装了可以分片、秒传及断点续传的上传插件
预览：https://shady-xia.github.io/vue-uploader-solutions
基于vue3的版本：https://github.com/shady-xia/vue-uploader-solutions-next
该仓库有对应的文章进行分析：
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件
前端服务：
npm install
npm start
# or
npm run serve前端服务默认打开8080端口
node服务端
cd server
npm install
npm run servernode服务会打开3000端口，临时文件存在 tmp 目录下，上传成功的文件存在 uploads 目录下
GlobalUploader.vue 为基于 vue-simple-uploader 二次封装的上传插件，源码路径为 /vue-simple-uploader/GlobalUploader.vue
它有两种使用方式：
作为全局上传组件使用时，将组件注册在App.vue中，通过 Event Bus 的方式调用插件。
使用场景为：上传器为整个网站级别的，切换路由时不打断上传流程，上传窗口始终存在于网站右下角。
打开上传器
调用Bus.$emit('openUploader')，打开上传器，弹出选择文件窗口，该函数有两个参数：
- params：传给服务端的额外参数
- options：上传选项，目前支持 target、testChunks、mergeFn、accept
Bus.$emit('openUploader', {
params: {
page: 'home'
},
options: {
target: 'http://10.0.0.10'
}
})Bus Events
- fileAdded：文件选择后的回调
- fileSuccess：文件上传成功的回调
// 文件选择后的回调
Bus.$on('fileAdded', () => {
console.log('文件已选择')
})
// 文件上传成功的回调
Bus.$on('fileSuccess', () => {
console.log('文件上传成功')
})使用场景为：在单个页面中使用上传器
props：
- global：请务必设置为
false，代表非全局 - params：（同用法一）传给服务端的额外参数
- options：（同用法一）上传选项，目前支持 target、testChunks、mergeFn、accept
events:
- fileAdded：文件选择后的回调
- fileSuccess：文件上传成功的回调
<global-uploader
:global="false"
:params="{page: 'home'}"
:options="{target: 'http://10.0.0.10'}"
@fileAdded="fileAdded"
/>见文章： Vue2.0结合webuploader实现文件分片上传
请捍卫自己作为劳动者的权利
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent