👉博主介绍: 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主
⛪️ 个人社区:个人社区
💞 个人主页:个人主页
🙉 专栏地址: ✅ Java 高阶
🙉八股文专题:剑指大厂,手撕 Java 八股文
文章目录
- 1. 什么是 MultipartResolver
- 2. 实现单文件上传
- 3. 实现多文件上传
- 4. 多文件多线程上传
- 5. 大文件分段上传
1. 什么是 MultipartResolver
MultipartResolver 是 Spring 框架提供的一个接口,用于处理 HTTP 请求中的多部分(multipart)数据,通常用于上传文件等场景。
当客户端发送包含文件上传或其他二进制数据的请求时,请求的内容类型为 multipart/form-data。MultipartResolver 的作用就是解析这种类型的请求,提取其中的各个部分数据。
Spring 框架提供了多种 MultipartResolver 的实现,常用的有以下几种:
CommonsMultipartResolver
:基于 Apache Commons FileUpload 库实现的 MultipartResolver。需要在项目中添加 commons-fileupload 依赖。StandardServletMultipartResolver
:基于 Servlet 3.0+ 的标准 API 实现的 MultipartResolver。不需要额外的依赖,适用于运行在 Servlet 3.0+ 容器中的项目。CosMultipartResolver
:基于 COS(Chinese Open Source)库实现的 MultipartResolver。需要在项目中添加 cos.jar 依赖。
使用 MultipartResolver 需要在 Spring 配置文件中进行相应的配置。例如,在使用 CommonsMultipartResolver 的情况下,可以进行如下配置:
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设置上传文件的最大大小 -->
<property name="maxUploadSize" value="5242880" />
</bean>
yml 配置如下:
spring:
servlet:
multipart:
max-file-size: 5MB
max-request-size: 5MB
在配置中,我们可以设置最大上传文件大小等参数。
一旦配置完成,Spring MVC 将会自动使用 MultipartResolver 来解析 multipart 请求,并将上传的文件或其他数据绑定到相应的方法参数中。
2. 实现单文件上传
我们以Spring Boot和Vue项目为背景,实现单文件上传可以按照以下步骤进行:
- 配置MultipartResolver:
在Spring Boot中,MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置:
spring:
servlet:
multipart:
max-file-size: 5MB
max-request-size: 5MB
上述配置将设置最大上传文件大小为5MB。
- 创建文件上传接口:
在Spring Boot的Controller中创建一个接口来处理文件上传请求。
@RestController
public class FileUploadController {
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file) {
// 检查上传的文件是否为空
if (file.isEmpty()) {
// 处理文件为空的情况
}
try {
// 获取上传文件的字节数据
byte[] bytes = file.getBytes();
// 执行文件存储或其他操作
// ...
return "上传成功";
} catch (IOException e) {
// 处理文件读取错误的情况
}
return "上传失败";
}
}
uploadFile
方法使用 @RequestParam
注解来接收名为 file
的文件参数,并使用 MultipartFile
类型来表示上传的文件。可以根据实际需求进行文件存储或其他操作。
- 创建Vue页面进行文件上传:
在Vue项目中,可以使用<input type="file">
标签来创建文件上传的表单。在表单提交时,使用axios或其他HTTP库将文件发送到后端接口。
<template>
<div>
<input type="file" @change="handleFileUpload">
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
uploadFile() {
let formData = new FormData();
formData.append('file', this.file);
axios.post('/upload', formData)
.then(response => {
console.log(response.data);
// 处理上传成功的响应
})
.catch(error => {
console.error(error);
// 处理上传失败的响应
});
}
}
};
</script>
通过 <input type="file">
标签和 @change
事件来监听文件选择,并将选择的文件保存在Vue组件的data中。在点击"上传"按钮时,使用axios库将文件发送到后端的 /upload
接口。
3. 实现多文件上传
以Spring Boot和Vue项目背景下,实现多文件上传可以按照以下步骤进行:
- 配置MultipartResolver:
在Spring Boot中,MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置:
spring:
servlet:
multipart:
max-file-size: 5MB
max-request-size: 5MB
上述配置将设置最大上传文件大小为5MB。
- 创建文件上传接口:
在Spring Boot的Controller中创建一个接口来处理文件上传请求。
@RestController
public class FileUploadController {
@PostMapping("/upload")
public String uploadFiles(@RequestParam("files") MultipartFile[] files) {
// 检查上传的文件是否为空
if (files == null || files.length == 0) {
// 处理文件为空的情况
}
for (MultipartFile file : files) {
try {
// 获取上传文件的字节数据
byte[] bytes = file.getBytes();
// 执行文件存储或其他操作
// ...
} catch (IOException e) {
// 处理文件读取错误的情况
}
}
return "上传成功";
}
}
uploadFiles
方法使用 @RequestParam
注解来接收名为 files
的文件数组参数,并使用 MultipartFile[]
类型来表示上传的多个文件。可以根据实际需求进行文件存储或其他操作。
- 创建Vue页面进行多文件上传:
在Vue项目中,可以使用<input type="file" multiple>
标签来创建多文件上传的表单。在表单提交时,使用axios或其他HTTP库将文件发送到后端接口。
<template>
<div>
<input type="file" multiple @change="handleFileUpload">
<button @click="uploadFiles">上传</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
files: []
};
},
methods: {
handleFileUpload(event) {
this.files = Array.from(event.target.files);
},
uploadFiles() {
let formData = new FormData();
this.files.forEach(file => {
formData.append('files', file);
});
axios.post('/upload', formData)
.then(response => {
console.log(response.data);
// 处理上传成功的响应
})
.catch(error => {
console.error(error);
// 处理上传失败的响应
});
}
}
};
</script>
通过 <input type="file" multiple>
标签和 @change
事件来监听文件选择,并将选择的文件保存在Vue组件的data中的一个数组中。在点击"上传"按钮时,使用axios库将文件发送到后端的 /upload
接口。
4. 多文件多线程上传
在Spring Boot和Vue项目背景下实现多文件多线程上传可以按照以下步骤进行:
- 配置MultipartResolver:
在Spring Boot中,MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置:
spring:
servlet:
multipart:
max-file-size: 5MB
max-request-size: 5MB
上述配置将设置最大上传文件大小为5MB。
- 创建文件上传接口:
在Spring Boot的Controller中创建一个接口来处理文件上传请求。
@RestController
public class FileUploadController {
public static final ExecutorService EXECUTOR_SERVICE= Executors.newFixedThreadPool(Runtime.getRuntime().availableProcessors());
@PostMapping("/upload")
public String uploadFiles(@RequestParam("files") MultipartFile[] files) {
// 检查上传的文件是否为空
if (files == null || files.length == 0) {
// 处理文件为空的情况
}
// 使用多线程进行文件上传
for (MultipartFile file : files) {
EXECUTOR_SERVICE.execute(() -> {
try {
// 获取上传文件的字节数据
byte[] bytes = file.getBytes();
// 执行文件存储或其他操作
// ...
} catch (IOException e) {
// 处理文件读取错误的情况
}
});
}
return "上传成功";
}
}
uploadFiles
方法使用 @RequestParam
注解来接收名为 files
的文件数组参数,并使用 MultipartFile[]
类型来表示上传的多个文件。在方法内部,我们创建了一个线程池(使用 Executors.newFixedThreadPool
),并使用多线程来处理文件上传操作。可以根据实际需求进行文件存储或其他操作。
- 创建Vue页面进行多文件上传:
在Vue项目中,可以使用<input type="file" multiple>
标签来创建多文件上传的表单。在表单提交时,使用axios或其他HTTP库将文件发送到后端接口。
<template>
<div>
<input type="file" multiple @change="handleFileUpload">
<button @click="uploadFiles">上传</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
files: []
};
},
methods: {
handleFileUpload(event) {
this.files = Array.from(event.target.files);
},
uploadFiles() {
let formData = new FormData();
this.files.forEach(file => {
formData.append('files', file);
});
axios.post('/upload', formData)
.then(response => {
console.log(response.data);
// 处理上传成功的响应
})
.catch(error => {
console.error(error);
// 处理上传失败的响应
});
}
}
};
</script>
上述示例中,通过 <input type="file" multiple>
标签和 @change
事件来监听文件选择,并将选择的文件保存在Vue组件的data中的一个数组中。在点击"上传"按钮时,使用axios库将文件发送到后端的 /upload
接口。
5. 大文件分段上传
在Spring Boot和Vue项目背景下实现大文件分段上传可以按照以下步骤进行:
- 配置MultipartResolver:
在Spring Boot中,MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置:
spring:
servlet:
multipart:
max-file-size: 5MB
max-request-size: 5MB
上述配置将设置最大上传文件大小为5MB。
- 创建文件上传接口:
在Spring Boot的Controller中创建一个接口来处理文件分段上传请求。
@RestController
public class FileUploadController {
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file,
@RequestParam("chunkNumber") int chunkNumber,
@RequestParam("totalChunks") int totalChunks) {
// 检查上传的文件是否为空
if (file.isEmpty()) {
// 处理文件为空的情况
}
try {
// 获取上传文件的字节数据
byte[] bytes = file.getBytes();
// 执行文件存储或其他操作
// ...
// 判断是否为最后一个分片
if (chunkNumber == totalChunks) {
// 所有分片上传完成,进行合并操作
// ...
}
return "上传成功";
} catch (IOException e) {
// 处理文件读取错误的情况
}
return "上传失败";
}
}
uploadFile
方法使用 @RequestParam
注解来接收文件参数、分片序号和总分片数。可以根据实际需求进行文件存储或其他操作。在最后一个分片上传完成后,可以进行文件合并操作。
- 创建Vue页面进行大文件分段上传:
在Vue项目中,可以使用<input type="file">
标签来创建文件选择的表单。在选择文件后,使用axios或其他HTTP库将文件分段发送到后端接口。
<template>
<div>
<input type="file" @change="handleFileUpload">
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
uploadFile() {
let chunkSize = 1024 * 1024; // 每个分片的大小,这里设置为1MB
let totalChunks = Math.ceil(this.file.size / chunkSize); // 总分片数
let start = 0;
for (let chunkNumber = 1; chunkNumber <= totalChunks; chunkNumber++) {
let end = Math.min(start + chunkSize, this.file.size);
let chunk = this.file.slice(start, end);
let formData = new FormData();
formData.append('file', chunk);
formData.append('chunkNumber', chunkNumber);
formData.append('totalChunks', totalChunks);
axios.post('/upload', formData)
.then(response => {
console.log(response.data);
// 处理上传成功的响应
})
.catch(error => {
console.error(error);
// 处理上传失败的响应
});
start += chunkSize;
}
}
}
};
</script>
我们将文件分成多个分片进行上传。在每个分片上传时,我们使用axios库将分片数据和相关参数发送到后端的 /upload
接口。
精彩专栏推荐订阅:在下方专栏👇🏻
✅ 2023年华为OD机试真题(A卷&B卷)+ 面试指导
✅ 精选100套 Java 项目案例
✅ 面试需要避开的坑(活动)
✅ 你找不到的核心代码
✅ 带你手撕 Spring
✅ Java 初阶