SpringBoot+Vue实现大文件上传（断点续传-前端控制）

SpringBoot+Vue实现大文件上传（断点续传）

1 环境 SpringBoot 3.2.1，Vue 2，ElementUI
2 问题 在前一篇文章，我们写了分片上传来实现大文件上传，存在一个问题就是，中间失败的话需要重新上传，那样的话效率低，我们可以基于分片上传来用断点续传，当中间失败了我们可以从某个文件块开始上传而不是从头开始。这个其实可以有两个方案，一个是在前端控制，后端返回上传失败，我们就记住上传失败的文件块的下标，下次从这个下标开始上传即可；第二种从后端控制，把每个文件块的状态记录在表里，下次上传时只保存没上传过的文件块即可。

效果图

前端代码

<template>
  <div class="container">
    <el-upload
        class="upload-demo"
        drag
        action="/xml/fileUpload"
        multiple
        :on-change="handleChange"
        :auto-upload="false">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip">
        <el-progress :style="{ width: percentage + '%' }"  :text-inside="true"
                     :stroke-width="24"
                     :percentage="percentage" :status="uploadStatus"></el-progress>
      </div>
    </el-upload>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'App',
  data() {
    return {
      file: '',
      fileList: [],
      CHUNK_SIZE: 1024 * 1024 * 100,//100MB
      percentage: 0,
      chunkNo: 0,
      uploadStatus:''
    }
  },
  watch: {},
  created() {
  },
  methods: {
    async submitUpload() {
      //获取上传的文件信息
      const file = this.fileList[0].raw
      //分片
      const totalChunks = Math.ceil(file.size / this.CHUNK_SIZE);
      const index = this.chunkNo
      this.uploadStatus = 'success'
      for (let i = index; i < totalChunks; i++) {
        const start = i * this.CHUNK_SIZE;
        const end = Math.min(start + this.CHUNK_SIZE, file.size);
        //将文件切片
        const chunk = file.slice(start, end);
        //组装参数
        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('fileName', file.name);
        formData.append('index', i);
        formData.append('status', 1);
        try {
          const res = await axios.post('/xml/bigFileUpload', formData)
          if (res.data.code === 200) {
            this.percentage = Math.ceil((i + 1) / totalChunks * 100)
            this.chunkNo = i + 1
          } else {
            this.$message({
              message: '上传失败',
              type: 'error'
            });
            this.uploadStatus = 'exception'
            return
          }
        }catch (err){
          console.log(err);
          this.$message.error('上传失败');
          this.uploadStatus = 'exception'
          return
        }
      }
      //调用合并分片请求
      await fetch('/xml/merge', {
        method: 'POST',
        body: JSON.stringify({fileName: file.name}),
        headers: {'Content-Type': 'application/json'}
      });
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
  }
}
</script>

<style>
.container {
  display: flex;
}
.progress-number {
  position: absolute;
  right: 5px;
  top: 0;
  color: white;
  transition: opacity 0.5s ease; /* 文字的平滑过渡效果 */
}
</style>

后端代码

package org.wjg.onlinexml.controller;

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.wjg.onlinexml.po.Result;

import java.io.File;
import java.io.FileOutputStream;
import java.nio.file.Files;
import java.util.Map;

@RestController
public class BigFileControll {
    // 获取资源文件夹的路径，路径为 项目所在路径/upload/
    private static final String UPLOAD_DIR = System.getProperty("user.dir") + "/upload/";

    /**
     * 保存分片
     * @param file
     * @param fileName
     * @param index
     * @return
     */
    @RequestMapping("/bigFileUpload")
    private Result bigFileUpload(@RequestParam("file") MultipartFile file, @RequestParam("fileName") String fileName, @RequestParam("index") int index,@RequestParam("status") int status) {
        if (file.isEmpty()) {
            return Result.builder().code(500).msg("上传失败！").build();
        }
        File uploadDir = new File(UPLOAD_DIR);
        if (!uploadDir.exists()) {
            uploadDir.mkdirs();
        }
        File uploadFile = new File(UPLOAD_DIR + fileName + "_" + index);
        try {
            //模拟上传中断-----------------------
            if(status == 1){
                if(index == 2){
                    return Result.builder().code(500).msg("上传失败").build();
                }
            }
            //-------------------结束------------------
            file.transferTo(uploadFile);
        } catch (Exception e) {
            e.printStackTrace();
            return Result.builder().code(500).msg("上传失败").build();
        }
        return Result.builder().code(200).msg("上传成功").build();
    }

    /**
     * 合并分片
     * @param request
     * @return
     */
    @PostMapping("/merge")
    public Result mergeChunks(@RequestBody Map<String, String> request) {
        String filename = request.get("fileName");
        File mergedFile = new File(UPLOAD_DIR + filename);
        try (FileOutputStream fos = new FileOutputStream(mergedFile)) {
            //循环获取分片，直到分片不存在为止
            for (int i = 0; ; i++) {
                File chunkFile = new File(UPLOAD_DIR + filename + "_" + i);
                if (!chunkFile.exists()) {
                    break;
                }
                //将分片复制到一个文件中，这种方法会追加
                Files.copy(chunkFile.toPath(), fos);
                //删除分片
                chunkFile.delete();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.builder().code(200).msg("合并成功").build();
    }
}

总结：这个方式基于分片上传，其实改动相对比较小，就是前端记录下文件块的下标，部分代码为模拟上传中断，方便大家测试，实际应用时可删除。请注意，前后端代码写的逻辑性不强，只为展示基础的用法，在实际使用时，可基于实际需求加以优化，如重新上传新文件时重置 上传进度和记录的文件块下标等，如有不对的地方，欢迎大家指正。