Vue+Springboot实现大文件上传的二种方式

vue+ElementUI实现的web管理，后台用springboot来实现的，需要实现上传几百M到几个G的文件上传并显示进度条。
尝试了几种方式，以下是一些总结

1. 利用ElementUI的el-upload

没有用el-upload的缺省上传，覆盖默认的上传行为，自定义上传的实现。

<el-upload action=""
            :http-request="uploadSectionFile">
    <el-button size="small" type="primary">点击上传</el-button>
 </el-upload>
    <el-progress v-show="showProgress" :text-inside="true" :stroke-width="18"
                       :percentage="uploadPercent"></el-progress>

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接口，服务端把前面收到的所有块文件按顺序组合成最终的文件。

<uploader :options="options" class="uploader-example" 
           @file-complete="fileComplete" @complete="complete">
       <uploader-unsupport></uploader-unsupport>
       <uploader-drop>
              <p>Drop files here to upload or</p>
       <uploader-btn>select files</uploader-btn>
       </uploader-drop>
       <uploader-list></uploader-list>
 </uploader>

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

image.png
这种方式支持选择多个文件，支持拖拽，支持上传速度和剩余估计时间显示，上传速度也挺快，可以满足我们的需求。

参考文档：
https://blog.csdn.net/niugang0920/article/details/89387209
https://github.com/simple-uploader/vue-uploader
https://blog.csdn.net/oppo5630/article/details/80880224