在现代应用程序中,处理大文件已成为一项常见需求,例如视频上传、数据迁移和日志分析等。然而,当处理超过内存容量的大文件时,可能会导致内存溢出(OutOfMemoryError)的问题,影响应用程序的稳定性和性能。传统的文件处理方式通常将整个文件加载到内存中,这在处理大文件时显然不可行。
为了解决这一挑战,我们需要采用高效的文件处理策略,例如分块处理和流式读取。这些方法可以有效降低内存占用,提高文件处理的效率。本文将深入探讨如何在 Spring Boot 3.3 中实现大文件的高效处理,包括分块上传、服务端分块保存,以及前端使用 jQuery 和 Bootstrap 实现分块上传的流程。
分块处理的流程介绍
分块处理是一种将大文件拆分为多个小块,逐个传输和处理的技术。其主要流程如下:
- 前端文件分块: 在客户端(浏览器)将大文件按照一定大小(如 1MB)进行拆分,生成多个文件块。
- 分块上传: 前端逐个将文件块通过 HTTP 请求上传到服务器,可以使用 AJAX 异步提交。
- 服务端接收并保存: 服务器接收到文件块后,按顺序将其保存到临时文件或直接写入目标文件,使用流式写入方式,避免占用过多内存。
- 合并文件块: 如果在临时目录保存,待所有文件块上传完成后,服务器将所有文件块按序合并为最终的完整文件。
- 返回上传结果: 服务器将上传结果以 JSON 格式返回给前端,前端根据结果进行相应的提示和处理。
运行效果:
图片
若想获取项目完整代码以及其他文章的项目源码,且在代码编写时遇到问题需要咨询交流,欢迎加入下方的知识星球。
项目结构
src
├── main
│ ├── java
│ │ └── com.icoderoad.largefile
│ │ ├── config
│ │ │ └── FileUploadProperties.java // 读取配置文件的类
│ │ ├── controller
│ │ │ └── FileUploadController.java // 文件上传控制器
│ │ ├── service
│ │ │ └── FileProcessingService.java // 文件处理服务(含分块处理逻辑)
│ ├── resources
│ │ ├── application.yml // 配置文件
│ │ ├── templates
│ │ │ └── index.html // 文件上传页面
└─── └───pom.xml // 项目依赖配置
POM 文件配置
在 pom.xml 中引入必要的依赖,包括 Spring Boot、Thymeleaf、文件上传和 JSON 处理等。
<?xml versinotallow="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.3.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.icoderoad</groupId>
<artifactId>largefile-upload</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>largefile-upload</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>17</java.version>
</properties>
<dependencies>
<!-- Spring Boot Starter Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Thymeleaf 模板引擎 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- 文件上传相关依赖 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<!-- lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
YAML 配置文件 application.yml
在 application.yml 中配置文件上传相关属性。
server:
port: 8080
spring:
servlet:
multipart:
max-file-size: 200MB
max-request-size: 210MB
file-upload:
upload-dir: /tmp/uploads
chunk-size: 1MB # 分块大小
读取配置类 FileUploadProperties.java
package com.icoderoad.largefile.config;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
@Data
@Component
@ConfigurationProperties(prefix = "file-upload")
public class FileUploadProperties {
private String uploadDir;
private String chunkSize; // 分块大小
}
文件处理服务 FileProcessingService.java
在服务层中实现分块处理的逻辑,包括接收文件块并按顺序保存。
package com.example.largefile.service;
import com.example.largefile.config.FileUploadProperties;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Objects;
@Service
@RequiredArgsConstructor
public class FileProcessingService {
private final FileUploadProperties fileUploadProperties;
// 保存单个文件块
public void saveFileChunk(MultipartFile file, String filename, int chunkIndex) throws Exception {
// 获取上传目录
String uploadDir = fileUploadProperties.getUploadDir();
Path uploadPath = Paths.get(uploadDir);
if (!Files.exists(uploadPath)) {
Files.createDirectories(uploadPath);
}
// 保存文件块到临时文件
File outputFile = new File(uploadDir + File.separator + filename + ".part" + chunkIndex);
try (InputStream inputStream = file.getInputStream();
FileOutputStream outputStream = new FileOutputStream(outputFile)) {
byte[] buffer = new byte[1024 * 1024]; // 1MB 缓冲区
int bytesRead;
while ((bytesRead = inputStream.read(buffer)) != -1) {
outputStream.write(buffer, 0, bytesRead);
}
}
}
// 合并文件块
public void mergeFileChunks(String filename, int totalChunks) throws Exception {
String uploadDir = fileUploadProperties.getUploadDir();
File outputFile = new File(uploadDir + File.separator + filename);
try (FileOutputStream outputStream = new FileOutputStream(outputFile, true)) {
for (int i = 0; i < totalChunks; i++) {
File chunkFile = new File(uploadDir + File.separator + filename + ".part" + i);
try (FileInputStream inputStream = new FileInputStream(chunkFile)) {
byte[] buffer = new byte[1024 * 1024];
int bytesRead;
while ((bytesRead = inputStream.read(buffer)) != -1) {
outputStream.write(buffer, 0, bytesRead);
}
}
// 删除块文件
chunkFile.delete();
}
}
}
}
文件上传控制器 FileUploadController.java
控制器接收分块文件,并在所有块接收完成后调用服务合并文件。返回 JSON 格式的数据,提示前端上传进度和状态。
package com.icoderoad.largefile.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.icoderoad.largefile.service.FileProcessingService;
import lombok.RequiredArgsConstructor;
@RestController
@RequiredArgsConstructor
@RequestMapping("/upload")
public class FileUploadController {
private final FileProcessingService fileProcessingService;
@PostMapping("/chunk")
public Map<String, Object> handleFileChunkUpload(
@RequestParam("file") MultipartFile file,
@RequestParam("filename") String filename,
@RequestParam("chunkIndex") int chunkIndex,
@RequestParam("totalChunks") int totalChunks) {
Map<String, Object> response = new HashMap<>();
try {
fileProcessingService.saveFileChunk(file, filename, chunkIndex);
response.put("status", "chunk_uploaded");
response.put("chunkIndex", chunkIndex);
// 如果是最后一个块,进行文件合并
if (chunkIndex == totalChunks - 1) {
fileProcessingService.mergeFileChunks(filename, totalChunks);
response.put("status", "file_uploaded");
}
} catch (Exception e) {
response.put("status", "error");
response.put("message", e.getMessage());
}
return response;
}
}
前端页面 index.html
前端页面使用 jQuery 分块上传文件,并使用 Bootstrap 的提示组件显示上传进度和结果。
在 src/main/resources/templates 目录下创建 index.html 文件:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>大文件上传</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="mt-5">大文件上传</h2>
<form id="uploadForm">
<div class="form-group">
<label for="file">选择文件</label>
<input type="file" class="form-control-file" id="file" name="file">
</div>
<button type="button" id="uploadBtn" class="btn btn-primary">上传</button>
</form>
<div id="uploadProgress" class="alert alert-info mt-3" style="display:none;"></div>
</div>
<script>
$(function() {
$('#uploadBtn').on('click', function() {
var file = $('#file')[0].files[0];
if (!file) {
alert('请选择文件进行上传');
return;
}
var chunkSize = 1024 * 1024; // 1MB
var totalChunks = Math.ceil(file.size / chunkSize);
for (var i = 0; i < totalChunks; i++) {
var chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
var formData = new FormData();
formData.append('file', chunk);
formData.append('filename', file.name);
formData.append('chunkIndex', i);
formData.append('totalChunks', totalChunks);
$.ajax({
url: '/upload/chunk',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (response) {
if (response.status === 'chunk_uploaded') {
$('#uploadProgress').show().text('已上传块: ' + (response.chunkIndex + 1) + '/' + totalChunks);
} else if (response.status === 'file_uploaded') {
$('#uploadProgress').removeClass('alert-info').addClass('alert-success').text('文件上传完成');
}
}
});
}
});
});
</script>
</body>
</html>
总结
本文深入探讨了如何在 Spring Boot3.3 中实现大文件分块处理与上传,通过分块的方式降低内存压力,并且结合 jQuery 前端实现了分块提交,利用 Bootstrap 进行用户上传状态的提示。通过这种方式,既提高了系统的稳定性,也增强了用户体验。在实际应用中,这种技术可以广泛应用于音视频文件上传、日志文件处理等场景,确保系统在处理大数据时依然能高效、稳定地运行。