Java后端（Spring Boot）和Vue前端（ElementUI的el-upload、vue-simple-uploader）实现大文件分片断点续传上传并有进度条显示上传情况

以下是一个使用Java后端（Spring Boot）和Vue前端（ElementUI的el-upload、vue-simple-uploader）实现大文件分片断点续传上传并有进度条显示上传情况的demo：

Java后端（使用SparkMD5计算文件MD5）：

创建一个Spring Boot项目，并添加相关依赖。

创建一个上传控制器 UploadController，其中包含文件上传和分片合并的逻辑。

java

```java
@RestController
public class UploadController {

  @PostMapping("/upload")
  public String upload(MultipartFile file){
    // 获取文件的MD5值
    String md5 = SparkMD5.calculate(file);
    // 处理上传逻辑
    // ...
    return "File uploaded successfully!";
  }
  
  @PostMapping("/sliceUpload")
  public String sliceUpload(MultipartFile file, int index, String md5){
    // 处理分片上传逻辑
    // ...
    return "Slice uploaded successfully!";
  }
  
  @PostMapping("/mergeSlices")
  public String mergeSlices(String md5){
    // 处理分片合并逻辑
    // ...
    return "Slices merged successfully!";
  }
}

在上述代码中，我们通过 SparkMD5.calculate(file) 方法获取文件的MD5值。

Vue前端（使用ElementUI的el-upload和vue-simple-uploader）：

创建一个Vue项目，并安装 vue-simple-uploader 插件。
bash
npm install vue-simple-uploader
在 main.js 中引入 ElementUI 和 vue-simple-uploader 并注册为全局组件。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueSimpleUploader from 'vue-simple-uploader';

Vue.use(ElementUI);
Vue.use(VueSimpleUploader);

在需要上传的组件中，添加上传文件的代码，并添加进度条显示。

<template>
  <div>
    <el-progress v-if="showProgress" :percentage="uploadProgress" status="uploading" style="width: 200px;"></el-progress>
    <el-upload
      ref="uploader"
      :action="uploadUrl"
      :file-size-limit="fileSizeLimit"
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      @on-success="onSuccess"
      @on-error="onError"
    >
      <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'http://localhost:8080/upload',
      fileSizeLimit: 1024 * 1024 * 100, // 100MB
      showProgress: false,
      uploadProgress: 0,
    };
  },
  methods: {
    beforeUpload(file) {
      // 计算文件的MD5值
      const reader = new FileReader();
      reader.onload = (e) => {
        const spark = new SparkMD5.ArrayBuffer();
        spark.append(e.target.result);
        const md5 = spark.end();
        
        // 将MD5值作为query参数传递给后端
        this.$refs.uploader.uploadUrl = `http://localhost:8080/sliceUpload?md5=${md5}`;
        
        // 重命名文件名，加上md5值，确保分片的文件名唯一
        const fileName = `${md5}_${file.name}`;
        
        // 设置新的文件名
        this.$refs.uploader.uploadHeaders = {
          'Content-Disposition': `filename=${encodeURIComponent(fileName)}`,
        };
        
         // 上传前，设置请求头，将md5值和文件名发送到后端
        this.$refs.uploader.uploadHeaders = {
          'X-MD5': md5,
          'X-FileName': fileName
        };
        
        this.$refs.uploader.upload(file);
        this.showProgress = true;
      };
      reader.readAsArrayBuffer(file);
      
      return false; // 阻止el-upload自动上传
    },
    onProgress(event, file, fileList) {
      // 获取上传进度
      this.uploadProgress = event.percent;
    },
    onSuccess(response) {
      // 上传成功
      console.log(response);
      this.showProgress = false;
    },
    onError(err) {
      // 上传失败
      console.error(err);
      this.showProgress = false;
    },
  },
};

在上述代码中，我们使用ElementUI的el-progress组件来显示上传进度，并通过onProgress方法获取上传进度。

注意，我们在上传前设置了请求头，将md5值和文件名发送到后端。

通过以上实现，你可以实现大文件分片断点续传上传，并在前端显示上传进度的功能。上传控制器负责接收到分片数据后进行处理，前端负责将文件切片并逐个上传，成功上传一个分片后再上传下一个分片，直到所有分片上传完成，最后对分片进行合并。