以下是一个使用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值和文件名发送到后端。
通过以上实现,你可以实现大文件分片断点续传上传,并在前端显示上传进度的功能。上传控制器负责接收到分片数据后进行处理,前端负责将文件切片并逐个上传,成功上传一个分片后再上传下一个分片,直到所有分片上传完成,最后对分片进行合并。