2023年7月13日发(作者：)

Vue+Springboot实现⼤⽂件上传的⼆种⽅式vue+ElementUI实现的web管理，后台⽤springboot来实现的，需要实现上传⼏百M到⼏个G的⽂件上传并显⽰进度条。尝试了⼏种⽅式，以下是⼀些总结1. 利⽤ElementU1. 利⽤ElementUI的el-upload没有⽤el-upload的缺省上传，覆盖默认的上传⾏为，⾃定义上传的实现。 点击上传 http-request 赋值就可以⾃定义⼀个上传函数。然后使⽤ el-progress 来显⽰进度。uploadSectionFile (param) { let form = new FormData() var that = this ('file', ) ('dir', 'temp1') that.$('192.168.1.65/upload', form, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: progressEvent => { Percent = ( / * 100) | 0 } }).then((res) => { ('上传结束') (res) }).catch((err) => { ('上传错误') (err) }) },进度条就是⽤ axios 带的 onUploadProgress 事件来实现获取和显⽰进度后端对应java实现⼀个基本的表单上传接⼝@RequestMapping(value = "/upload", method = {}) public Result upload(@RequestParam(required = false) String dir, @RequestParam(required = false) MultipartFile file) { try { n("upload start = " + tTimeMillis()); String videoUrl = uploadFile(file, dir); n("upload end = " + tTimeMillis()); return s("上传成功", videoUrl); } catch (Exception var3) { return (sage()); } }public String uploadFile(MultipartFile file, String resSort) throws Exception { String shortPath = ginalFilename(); File dest = new File("C://Temp", shortPath); if (!entFile().exists()) { boolean rel = entFile().mkdirs(); if (!rel) { throw new Exception("⽂件夹创建失败"); } } InputStream is = utStream(); OutputStream os = new FileOutputStream(dest); try { byte[] buffer = new byte[8 * 1024]; int bytesRead; while ((bytesRead = (buffer)) != -1) { (buffer, 0, bytesRead); } } catch (Exception e) { throw e; } finally { if (is != null) { (); } if (os != null) { (); } } return shortPath; }功能实现没有问题。但是有2个问题：上传速度太慢，没有分⽚单线程上传1个G的⽂件即使在局域⽹也很慢上传显⽰的进度条不准确，进度已经100%了，但是还需要等很久在服务端才⽣成完⽂件其中第⼆个问题做了⼀些简单的研究，上传的⼤概流程分三步骤：是前端先和服务端数据交互，服务端的内存⾥先保存所有上传的数据内容，这个阶段结束后，进度就已经是100%了服务端内存会把内存数据保存到本地⼀个临时⽬录，我们可以在 ties ⽂件⾥设置这个⽬录的值on= C://Temp1

# 最⼤⽀持⽂件⼤⼩-file-size=1000MB# 最⼤⽀持请求⼤⼩-request-size=1000MB临时⽬录的⽂件拷贝到最终⽬录，然后删除临时⽬录的⽂件以上原因，所以考虑还是⽤分⽚上传。2. 利⽤百度的webuploaderWebUploader是⽹上⽐较推荐的⽅式，分⽚上传⼤⽂件速度很快，但是我在 vue 下并没有尝试成功，最后也放弃了。它也有⼏个问题就是：必须依赖 jquery不能 import 导⼊，只能在 ⾥包含不管是显式的还是⾃动的，相关的回调总是⽆法触发（笔者前端⽔平有限）3. 利⽤vue-uploadervue-uploader 是基于vue的uploader组件，缺省就是分⽚上传。通过npm安装，基本流程参考github上的说明即可。上传的基本原理就是前端根据⽂件⼤⼩，按块⼤⼩分成很多块，然后多线程同时上传多个块，同时调⽤服务端的上传接⼝，服务端会⽣成很多⼩块⼩块的⽂件。所有块都上传完之后，前端再调⽤⼀个服务端的merge接⼝，服务端把前⾯收到的所有块⽂件按顺序组合成最终的⽂件。

@file-complete="fileComplete" @complete="complete">

Drop files here to upload or

select files data () { return { options: { // /simple-uploader/Uploader/tree/develop/samples/ target: '192.168.1.84:8089/upload', testChunks: false, //上传前判断块是否已经存在 simultaneousUploads: 5, //并发数 chunkSize: 8 * 1024 * 1024 //块⼤⼩ },...methods: { complete () { ('complete', arguments) }, fileComplete () { ('file complete', arguments) const file = arguments[0].file let url = '192.168.1.84:8089/upload/merge?filename=' + + '&guid=' + arguments[0].uniqueIdentifier this.$(url).then(function (response) { (response) }).catch(function (error) { (error) }) }对应的服务端需要实现2个接⼝，upload 和 merge ，具体可以参考这种⽅式⽀持选择多个⽂件，⽀持拖拽，⽀持上传速度和剩余估计时间显⽰，上传速度也挺快，可以满⾜我们的需求。