vue+ElementUI实现的web管理，后台用springboot来实现的，需要实现上传几百M到几个G的文件上传并显示进度条。
尝试了几种方式，以下是一些总结
1. 利用ElementUI的el-upload
没有用el-upload的缺省上传，覆盖默认的上传行为，自定义上传的实现。
点击上传
http-request 赋值就可以自定义一个上传函数。然后使用 el-progress 来显示进度。
uploadSectionFile (param) {
let form = new FormData()
var that = this
form.append('file', param.file)
form.append('dir', 'temp1')
that.$axios.post('http://192.168.1.65/upload', form, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
that.uploadPercent = (progressEvent.loaded / progressEvent.total * 100) | 0
}
}).then((res) => {
console.log('上传结束')
console.log(res)
}).catch((err) => {
console.log('上传错误')
console.log(err)
})
},
进度条就是用 axios 带的 onUploadProgress 事件来实现获取和显示进度
后端对应java实现一个基本的表单上传接口
@RequestMapping(value = "/upload", method = {RequestMethod.POST})
public Result upload(@RequestParam(required = false) String dir, @RequestParam(required = false) MultipartFile file) {
try {
System.out.println("upload start = " + System.currentTimeMillis());
String videoUrl = uploadFile(file, dir);
System.out.println("upload end = " + System.currentTimeMillis());
return ResultUtil.success("上传成功", videoUrl);
} catch (Exception var3) {
return ResultUtil.fail(var3.getMessage());
}
}
public String uploadFile(MultipartFile file, String resSort) throws Exception {
String shortPath = file.getOriginalFilename();
File dest = new File("C://Temp", shortPath);
if (!dest.getParentFile().exists()) {
boolean rel = dest.getParentFile().mkdirs();
if (!rel) {
throw new Exception("文件夹创建失败");
}
}
InputStream is = file.getInputStream();
OutputStream os = new FileOutputStream(dest);
try {
byte[] buffer = new byte[8 * 1024];
int bytesRead;
while ((bytesRead = is.read(buffer)) != -1) {
os.write(buffer, 0, bytesRead);
}
} catch (Exception e) {
throw e;
} finally {
if (is != null) {
is.close();
}
if (os != null) {
os.close();
}
}
return shortPath;
}
功能实现没有问题。但是有2个问题：
- 上传速度太慢，没有分片单线程上传1个G的文件即使在局域网也很慢
- 上传显示的进度条不准确，进度已经100%了，但是还需要等很久在服务端才生成完文件
其中第二个问题做了一些简单的研究，上传的大概流程分三步骤：
- 是前端先和服务端数据交互，服务端的内存里先保存所有上传的数据内容，这个阶段结束后，进度就已经是100%了
- 服务端内存会把内存数据保存到本地一个临时目录，我们可以在 application.properties 文件里设置这个目录的值 spring.servlet.multipart.location
spring.servlet.multipart.location= C://Temp1
# 最大支持文件大小
spring.servlet.multipart.max-file-size=1000MB
# 最大支持请求大小
spring.servlet.multipart.max-request-size=1000MB
- 临时目录的文件拷贝到最终目录，然后删除临时目录的文件
以上原因，所以考虑还是用分片上传。
2. 利用百度的webuploader
WebUploader是网上比较推荐的方式，分片上传大文件速度很快，但是我在 vue 下并没有尝试成功，最后也放弃了。它也有几个问题就是：
- 必须依赖 jquery
- 不能 import 导入，只能在 index.html 里包含
- 不管是显式的还是自动的，相关的回调总是无法触发（笔者前端水平有限）
3. 利用vue-uploader
vue-uploader 是基于vue的uploader组件，缺省就是分片上传。
通过npm安装，基本流程参考github上的说明即可。
上传的基本原理就是前端根据文件大小，按块大小分成很多块，然后多线程同时上传多个块，同时调用服务端的上传接口，服务端会生成很多小块小块的文件。
所有块都上传完之后，前端再调用一个服务端的merge接口，服务端把前面收到的所有块文件按顺序组合成最终的文件。
Drop files here to upload or
select files
data () {
return {
options: {
// https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
target: 'http://192.168.1.84:8089/upload',
testChunks: false, //上传前判断块是否已经存在
simultaneousUploads: 5, //并发数
chunkSize: 8 * 1024 * 1024 //块大小
},
...
methods: {
complete () {
console.log('complete', arguments)
},
fileComplete () {
console.log('file complete', arguments)
const file = arguments[0].file
let url = 'http://192.168.1.84:8089/upload/merge?filename=' + file.name + '&guid=' + arguments[0].uniqueIdentifier
this.$axios.get(url).then(function (response) {
console.log(response)
}).catch(function (error) {
console.log(error)
})
}
对应的服务端需要实现2个接口，upload 和 merge ，具体可以参考git
这种方式支持选择多个文件，支持拖拽，支持上传速度和剩余估计时间显示，上传速度也挺快，可以满足我们的需求。
参考文档：
https://blog.csdn.net/niugang0920/article/details/89387209
https://github.com/simple-uploader/vue-uploader
https://blog.csdn.net/oppo5630/article/details/80880224