大文件上传源码，支持单个大文件与多个大文件

Ⅰ 思路

具体思路请参考我之前的文章，这里分享的是上传流程与源码
https://blog.csdn.net/sugerfle/article/details/130829022

Ⅱ 具体代码

前端–单个大文件

<template>
  <el-upload ref="fUploadFile"
             multiple
             action=""
             :show-file-list="false"
             :http-request="fhandleFileUpload"
             :limit="2"
             :on-exceed="fhandleExceed"
             :on-success="fhandleSuccess"
             :on-change="fhandleChange"
             :file-list="fFileList"
              >
    <el-button class="button" type="primary">上传</el-button>
  </el-upload>
</template>

<script>
import SparkMD5 from "spark-md5";
import {fcheckFileExists, fgetUploadedChunks, fMergeChunks, fUploadedChunks} from "@/api/record/recordfile";
export default {
  name: "VCUpload",
  props:['parentId'],
  data(){
    return{
      fFileList: [], // 文件列表
      fFile: null, // 当前文件
      fChunkSize: 3 * 1024 * 1024, // 分片大小：3MB
      fChunks: [], // 分片数组
      fUploadedChunks: [], // 已上传分片索引
      fFileType:"",
      fFileName:""
    }
  },
  methods:{
    fhandleChange(file){
      this.file = file.raw;
      var fileName = file.name;
      var fileArr = fileName.split('.');
      this.fFileType=fileArr[fileArr.length-1];
      this.fFileName = file.name

      console.log("fhandleChange",file.raw)
      this.initChunks();
    },
    fhandleFileUpload(data){
      console.log("Flx组件",data)
    },
    fhandleExceed(){

    },
    fhandleSuccess(){
      this.$refs.fUploadFile.clearFiles();
    },



    //  =========  分片相关业务方法   =============
    // 初始化分片
    initChunks() {
      if (!this.file) return;

      const file = this.file;
      this.fChunks = [];
      let cur = 0;

      while (cur < file.size) {
        this.fChunks.push({
          index: this.fChunks.length,
          file: file.slice(cur, cur + this.fChunkSize),
        });
        cur += this.fChunkSize;
      }
      console.log("初始化分片",this.fChunks)
      this.calculateMD5(); // 计算文件 MD5
    },
    // 计算文件 MD5
    calculateMD5() {
      const spark = new SparkMD5.ArrayBuffer();
      const reader = new FileReader();

      reader.readAsArrayBuffer(this.file);
      reader.onload = (e) => {
        spark.append(e.target.result);
        const md5 = spark.end();
        this.checkFileExists(md5); // 检查文件是否已存在
      };
    },
    // 检查文件是否已存在（秒传逻辑）
    checkFileExists(md5) {
      console.log("秒传逻辑",md5)
      const data = {
        fileMd5:md5,
        parentId:this.parentId
      }
      fcheckFileExists(data).then(resp=>{
        console.log("检查文件是否已存在",resp)
        if(resp.data.data){
          this.$message.success('文件上传成功！');
        }else {
          this.getUploadedChunks(md5); // 获取已上传分片
        }
      }).catch(res=>{
        this.$message.success('文件检查失败！');
      })
    },
    // 获取已上传分片（断点续传逻辑）
    getUploadedChunks(md5) {
      const data = {
        md5: md5
      }
      fgetUploadedChunks(data).then(resp=>{
        console.log("获取数据库中已经上传分片",resp.data.data)
        this.fUploadedChunks = resp.data.data;
        // 开始上传
        this.startUpload(md5);
      })
    },
    // 开始上传
    async startUpload(md5) {
      const allChunkLength =  this.fChunks.length;
      for(let i=0;i<allChunkLength;i++){
        console.log("是否需要继续上传",this.fUploadedChunks.includes(this.fChunks[i].index+""))
        if (!this.fUploadedChunks.includes(this.fChunks[i].index+"")) {
          const formData = new FormData();
          let formDataObj = {
            chunkIndex:this.fChunks[i].index,
            md5:md5
          }
          let sendData = JSON.stringify(formDataObj)
          formData.append('dto',new Blob([sendData],{type:"application/json"}))
          formData.append('chunkFile',this.fChunks[i].file)
          const result = await this.fetchUploadedChunks(formData);
          if(result=="error"){
            this.$message.success('文件分片上传失败！');
            return
          }
          console.log("上传分片成功",result)
          this.fUploadedChunks.push(this.fChunks[i].index);
          // 记录已上传分片
          if (this.fUploadedChunks.length === this.fChunks.length) {
            // 合并分片
            console.log("合并分片")
            this.mergeChunks(md5);
          }
        }
      }

    },
    fetchUploadedChunks(formData){
      return new Promise((resolve,reject)=>{
        fUploadedChunks(formData).then((resp)=>{
          resolve(resp.data.data)
        }).catch(err=>{
          reject("error")
        })
      })
    },
    mergeChunks(md5) {
      const data = {
        md5: md5,
        fileType:this.fFileType,
        parentId:this.parentId,
        name: this.fFileName,
      }
      fMergeChunks(data).then(resp=>{
        console.log("分片合并成功",resp.data.data)
        this.$message.success('文件上传完成！');
        this.fFileList = []
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>

前端–多个大文件

<template>
  <div style="display: flex">
    <el-upload ref="fUploadFile"
               action=""
               :auto-upload="false"
               :show-file-list="false"
               :multiple="true"
               :http-request="fhandleFileUpload"
               :limit="5"
               :on-exceed="fhandleExceed"
               :on-success="fhandleSuccess"
               :file-list="fFileList"
    >
      <el-button class="button" type="primary">选择文件</el-button>
    </el-upload>
    <el-button class="button" type="primary" @click.native="fsubmitUpload">上传</el-button>
  </div>
</template>

<script>
import SparkMD5 from "spark-md5";
import {fcheckFileExists, fgetUploadedChunks, fMergeChunks, fUploadedChunks} from "@/api/record/recordfile";
export default {
  name: "VCUpload",
  props:['parentId'],
  data(){
    return{
      fFileList: [], // 文件列表
      fChunkSize: 3 * 1024 * 1024, // 分片大小：3MB
    }
  },
  methods:{
    // 自定义上传方法
    fhandleFileUpload(options){
      console.log("自定义上传方法",options)
      const { file } = options;

      const fileName = file.name;
      const fileArr = fileName.split('.');
      const fFileType=fileArr[fileArr.length-1];

      // 初始化分片
      const fChunks =  this.initChunks(file);

      // 计算文件 MD5 并绑定到文件对象
      this.calculateMD5(file).then((md5) => {
        file.md5 = md5; // 将 MD5 值绑定到文件对象

        // 检查文件是否已存在（秒传逻辑）
        this.checkFileExists(md5).then((exists) => {
          if (exists) {
            this.$message.success(`${file.name} 已存在，无需上传！`);
            return;
          }

          // 获取已上传分片（断点续传逻辑）
          this.getUploadedChunks(md5).then(res=>{
            const fUploadedChunks = res;
            // 开始上传
            this.startUpload(md5,fChunks,fUploadedChunks,fileName,fFileType);
          });
        });
      });

    },
    // 文件超出限制时的回调
    fhandleExceed(files, fileList) {
      this.$message.warning(`最多只能上传5个文件！`);
    },
    fsubmitUpload(){
      this.$refs.fUploadFile.submit();
    },
    fhandleSuccess(){
      this.$refs.fUploadFile.clearFiles();
    },



    //  =========  分片相关业务方法   =============
    // 初始化分片
    initChunks(fArgsfile) {
      const file = fArgsfile;
      const fChunks = [];
      let cur = 0;

      while (cur < file.size) {
        fChunks.push({
          index: fChunks.length+"",
          file: file.slice(cur, cur + this.fChunkSize),
        });
        cur += this.fChunkSize;
      }
      console.log("初始化分片",fChunks)
      return fChunks;
    },
    // 计算文件 MD5
    calculateMD5(fArgsfile) {
      // 计算文件 MD5
        return new Promise((resolve) => {
          const spark = new SparkMD5.ArrayBuffer();
          const reader = new FileReader();

          reader.readAsArrayBuffer(fArgsfile);
          reader.onload = (e) => {
            spark.append(e.target.result);
            resolve(spark.end());
          };
        });
    },
    // 检查文件是否已存在（秒传逻辑）
    checkFileExists(md5) {
      return new Promise((resolve) => {
        const data = {
          fileMd5:md5,
          parentId:this.parentId
        }
        fcheckFileExists(data).then(resp=>{
          console.log("检查文件是否已存在",resp)
          resolve(resp.data.data)
        })
      })
    },
    // 获取已上传分片（断点续传逻辑）
    getUploadedChunks(md5) {
      return new Promise((resolve) => {
        const data = {
          md5: md5
        }
        fgetUploadedChunks(data).then(resp=>{
          console.log("获取数据库中已经上传分片",resp.data.data)
          resolve(resp.data.data)
        })
      })
    },
    // 开始上传
    async startUpload(md5,fChunks,fUploadedChunks,fileName,fFileType) {
      const allChunkLength =  fChunks.length;
      for(let i=0;i<allChunkLength;i++){
        console.log("是否需要继续上传",fUploadedChunks,fChunks[i].index)
        if (!fUploadedChunks.includes(fChunks[i].index)) {
          const formData = new FormData();
          let formDataObj = {
            chunkIndex:fChunks[i].index,
            md5:md5
          }
          let sendData = JSON.stringify(formDataObj)
          formData.append('dto',new Blob([sendData],{type:"application/json"}))
          formData.append('chunkFile',fChunks[i].file)
          const result = await this.fetchUploadedChunks(formData);
          if(result=="error"){
            this.$message.success('文件分片上传失败！');
            return
          }
          console.log("上传分片成功",result)
          fUploadedChunks.push(fChunks[i].index);
          // 记录已上传分片
          if (fUploadedChunks.length === fChunks.length) {
            // 合并分片
            this.mergeChunks(md5,fileName,fFileType);
          }
        }
      }

    },
    fetchUploadedChunks(formData){
      return new Promise((resolve,reject)=>{
        fUploadedChunks(formData).then((resp)=>{
          resolve(resp.data.data)
        }).catch(err=>{
          reject("error")
        })
      })
    },
    mergeChunks(md5,fileName,fFileType) {
      const data = {
        md5: md5,
        fileType:fFileType,
        parentId:this.parentId,
        name: fileName,
      }
      fMergeChunks(data).then(resp=>{
        console.log("分片合并成功",resp.data.data)
        this.$message.success(fileName+'文件上传完成！');
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>

前端接口

export function fcheckFileExists(obj) {
  return request({
    url: '/admin/recordfile/check-file',
    method: 'post',
    data: obj
  })
}


export function fgetUploadedChunks(obj) {
  return request({
    url: '/admin/recordfile/get-uploaded-chunks',
    method: 'post',
    data: obj
  })
}


export function fUploadedChunks(obj) {
  return request({
    url: '/admin/recordfile/upload-chunk',
    method: 'post',
    data: obj
  })
}

export function fMergeChunks(obj) {
  return request({
    url: '/admin/recordfile/merge-chunks',
    method: 'post',
    data: obj
  })
}

后端

    //=============  分片上传  ================
    @PostMapping("/check-file")
    public R<Boolean> checkFileExists(@RequestBody Map<String, String> request) {
        String fileMd5 = request.get("fileMd5");
        String parentId = request.get("parentId");
        QueryWrapper<RecordFile> q = new QueryWrapper<>();
        q.eq("md5",fileMd5);
        RecordFile recordFile = recordFileService.getOne(q);

        if (recordFile != null && Objects.equals(recordFile.getUploadStatus(), "1")) {
            // 文件已存在且已完成上传
            if(Long.parseLong(parentId)!=recordFile.getParentId()){
                RecordFile recordFile1 = new RecordFile();
                recordFile1.setName(recordFile.getName());
                recordFile1.setParentId(Long.parseLong(parentId));
                recordFile1.setPath(recordFile.getPath());
                recordFile1.setType("file");
                recordFile1.setFileType("upload");
                recordFile1.setUploadStatus("1");
                recordFileService.save(recordFile1);
            }
            return R.ok(Boolean.TRUE);
        }

        // 如果文件不存在，则创建新的文件记录，并设置初始状态为未完成
        if (recordFile == null) {
            recordFile = new RecordFile();
            recordFile.setMd5(fileMd5);
            recordFile.setUploadStatus("0"); // 设置初始状态为未完成
            recordFileService.save(recordFile);
        }

        // 文件不存在或未完成上传
        return  R.ok(Boolean.FALSE);
    }



    @PostMapping("/get-uploaded-chunks")
    public R<List<String>> getUploadedChunks(@RequestBody Map<String, String> request) {
        String md5 = request.get("md5");
        QueryWrapper<RecordFileChunk> q = new QueryWrapper<>();
        q.eq("md5",md5);
        List<RecordFileChunk> chunks = recordFileChunkService.list(q);
        List<String> uploadedChunkIndexes = chunks.stream()
                .filter(chunk -> Objects.equals(chunk.getIsUploaded(), "1"))
                .map(RecordFileChunk::getChunkIndex)
                .collect(Collectors.toList());
        return R.ok(uploadedChunkIndexes);
    }



    @PostMapping("/upload-chunk")
    public R uploadChunk(@RequestPart("dto") RecordFileChunk recordFileChunk, @RequestPart(name = "chunkFile")MultipartFile file) {
        if(file!=null){
            R r = sysFileService.uploadFile222(file);
            RecordFileChunk myRecordFileChunk = new RecordFileChunk();
            myRecordFileChunk.setChunkPath((((Map<String, String>)r.getData()).get("url")));
            myRecordFileChunk.setChunkSize(file.getSize());
            myRecordFileChunk.setChunkIndex(recordFileChunk.getChunkIndex());
            myRecordFileChunk.setMd5(recordFileChunk.getMd5());
            myRecordFileChunk.setIsUploaded("1");
            R.ok(recordFileChunkService.save(myRecordFileChunk));

            return R.ok(Boolean.TRUE);

        }else {
            return R.ok(Boolean.FALSE);
        }
    }


    @PostMapping("/merge-chunks")
    public R mergeChunk(@RequestBody Map<String, String> request) {
        String md5 = request.get("md5");
        String fileType = request.get("fileType");
        String parentId = request.get("parentId");
        String myName = request.get("name");
        QueryWrapper<RecordFileChunk> q = new QueryWrapper<>();
        q.eq("md5",md5);
        List<RecordFileChunk> chunks = recordFileChunkService.list(q);
        List<RecordFileChunk> sortchunks = chunks.stream()
                .sorted(Comparator.comparingInt(o -> Integer.parseInt(o.getChunkIndex())))
                .collect(Collectors.toList());

        String fileName = IdUtil.simpleUUID() + StrUtil.DOT +  fileType;

        String filePath = String.format("/admin/sys-file/%s/%s", properties.getBucketName(), fileName);

        String var10000 = this.properties.getLocal().getBasePath();
        String dir = var10000 + FileUtil.FILE_SEPARATOR + properties.getBucketName();
        String MyUrl = dir + FileUtil.FILE_SEPARATOR + fileName;

        try (FileOutputStream fos = new FileOutputStream(MyUrl)) {
            // 遍历每个分片路径
            for (RecordFileChunk chunkPath : sortchunks) {
                try (FileInputStream fis = new FileInputStream(chunkPath.getChunkPath())) {
                    // 缓冲区大小
                    byte[] buffer = new byte[1024];
                    int length;
                    while ((length = fis.read(buffer)) > 0) {
                        // 将分片内容写入目标文件
                        fos.write(buffer, 0, length);
                    }
                }
            }
            System.out.println("文件合并完成！");
        } catch (IOException e) {
            e.printStackTrace();
            throw new RuntimeException("文件合并失败！", e);
        }


        QueryWrapper<RecordFile> q22 = new QueryWrapper<>();
        q22.eq("md5",md5);

        RecordFile fileInfo = recordFileService.getOne(q22);
        if (fileInfo != null) {
            fileInfo.setUploadStatus("1"); // 更新文件状态为已完成
            fileInfo.setPath(filePath);
            fileInfo.setType("file");
            fileInfo.setFileType("upload");
            fileInfo.setParentId(Long.valueOf(parentId));
            fileInfo.setName(myName);
            recordFileService.saveOrUpdate(fileInfo);
        }
        return R.ok();

    }