基于axios的Spring Boot文件上传实现
作者:桌面漫游时间:2026-10-23 11:30:59浏览:174
本文介绍如何使用axios在前端实现文件上传功能,并通过Spring Boot后端接收处理。前端利用FormData封装文件数据,指定Content-Type为multipart/form-data,后端通过MultipartHttpServletRequest解析请求,结合CommonsMultipartResolver配置上传限制,完成文件存储。
axios文件上传实现概述
本文分享使用axios完成文件上传功能的具体代码示例,供读者参考。
前端页面与资源引入
前端页面部分。
首先需要在项目中引入axios的JavaScript库文件。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
HTML表单结构
HTML结构部分。
<input type="file" name="img"/>
<br>
<span οnclick="upload()">上传图片</span>
JavaScript上传逻辑
JavaScript逻辑部分。
function upload() {
alert("上传")
let file = document.getElementsByName('img')[0].files[0];
let formData = new FormData();
formData.append("uploadFile",file,file.name);
const config = {
headers: { "Content-Type": "multipart/form-data;boundary="+new Date().getTime() }
};
axios
.post("/file/upload",formData,config)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
后端接收与处理
后端接收处理部分。
@PostMapping(value = "/upload")
public String upload(HttpServletRequest request){
logger.info("开始上传……");
MultipartHttpServletRequest servletRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = servletRequest.getFileMap();
for (Map.Entry entry : fileMap.entrySet()) {
logger.info("name : {}",entry.getKey());
MultipartFile multipartFile = (MultipartFile) entry.getValue();
try {
FileUtil.writeFile(multipartFile.getInputStream(),path+"/12_"+multipartFile.getOriginalFilename());
} catch (IOException e) {
e.printStackTrace();
}
}
return "{'result':'OK'}";
}
@RequestMapping(value = "/uploadII")
public String uploadII(@RequestParam("uploadFile") MultipartFile uploadFile){
logger.info("upload : {}",uploadFile);
try {
InputStream inputStream = uploadFile.getInputStream();
String originalFilename = uploadFile.getOriginalFilename();
logger.info("file : {}",originalFilename);
FileUtil.writeFile(inputStream,path+"/"+originalFilename);
} catch (IOException e) {
e.printStackTrace();
}
return "{'result':'OK'}";
}
Maven依赖配置
pom.xml依赖配置部分。
<!-- 文件上传 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
CommonsMultipartResolver配置
Spring配置中注入CommonsMultipartResolver Bean部分。
@Bean
public CommonsMultipartResolver initCommonsMultipartResolver(){
CommonsMultipartResolver resolver = new CommonsMultipartResolver();
resolver.setMaxUploadSize(104857600);
resolver.setMaxInMemorySize(4096);
return resolver;
}
axios官方GitHub仓库地址。
以上就是本文的全部内容,希望能为各位的学习提供帮助,同时也欢迎大家继续支持本站。
作者最新文章
Mock.js 拦截失效或数据格式错误的常见原因及排查
2026-11-05 10:11:59
Java和JavaScript名字像但没关系:辨析Java、JavaWeb与JS
2026-11-04 09:30:54
CodePen、JSFiddle与RunJS对比:哪款JS在线运行工具更适合你?
2026-11-03 16:46:57
JS 统计图渲染空白或报错怎么排查?常见问题解决指南
2026-11-03 09:49:40
flv.js 常见报错 MediaError 与解码失败排查指南
2026-11-02 10:29:29
