开发中文件上传是不可避免的功能，但有时候同时处理上传文件和参数如果不注意细节就会出现很多问题，偶尔看到有位同学总结的spring boot项目同时传递参数和文件的多种方式，使用的是SpringBoot+Vue，那我就在这位同学的基础上再总结一下使用Ajax混合上传文件和参数的方法吧。
因为SpringBoot的org.springframework.boot:spring-boot-autoconfigure包里的org.springframework.boot.autoconfigure.web.servlet.MultipartAutoConfiguration自动配置了文件上传解析器，所以就不用自己配置文件上传解析器了
@AutoConfiguration
@ConditionalOnClass({ Servlet.class, StandardServletMultipartResolver.class, MultipartConfigElement.class })
@ConditionalOnProperty(prefix = "spring.servlet.multipart", name = "enabled", matchIfMissing = true)
@ConditionalOnWebApplication(type = Type.SERVLET)
@EnableConfigurationProperties(MultipartProperties.class)
public class MultipartAutoConfiguration {
private final MultipartProperties multipartProperties;
public MultipartAutoConfiguration(MultipartProperties multipartProperties) {
this.multipartProperties = multipartProperties;
}
@Bean
@ConditionalOnMissingBean({ MultipartConfigElement.class, CommonsMultipartResolver.class })
public MultipartConfigElement multipartConfigElement() {
return this.multipartProperties.createMultipartConfig();
}
@Bean(name = DispatcherServlet.MULTIPART_RESOLVER_BEAN_NAME)
@ConditionalOnMissingBean(MultipartResolver.class)
public StandardServletMultipartResolver multipartResolver() {
StandardServletMultipartResolver multipartResolver = new StandardServletMultipartResolver();
multipartResolver.setResolveLazily(this.multipartProperties.isResolveLazily());
return multipartResolver;
}
}
1、简单参数+文件上传
使用表单直接提交所有参数和文件
前端代码
后端代码
@PostMapping("/upload")
public String upload(
@RequestParam("id") Integer id,
@RequestParam("username") String username,
@RequestParam("password") String password,
@RequestPart("photo") MultipartFile photo,
@RequestPart("files") MultipartFile[] files
) {
System.out.println(id);
System.out.println(username);
System.out.println(password);
String originalFilename = photo.getOriginalFilename();
int length = files.length;
return "index";
}
运行结果
2、参数封装JavaBean+文件上传
前端代码和上边一样，但是后端改为用User对象接收参数
前端代码
后端代码
@ResponseBody
@PostMapping("/upload")
public String upload(User user, @RequestPart("photo") MultipartFile photo, @RequestPart("files") MultipartFile[] files) {
System.out.println(user);
System.out.println(photo.getOriginalFilename());
System.out.println(files[0].getOriginalFilename());
System.out.println(files[1].getOriginalFilename());
return "ok";
}
运行结果
3、前端接收JSON字符串+文件上传
前端使用Ajax发送请求，后端接收到json字符串后，可以手动解析为JavaBean对象
前端代码
后端代码
@ResponseBody
@PostMapping("/upload")
public String upload(@RequestPart String user, @RequestPart("photo") MultipartFile photo, @RequestPart("files") MultipartFile[] files) {
System.out.println(user);
System.out.println(photo.getOriginalFilename());
System.out.println("===========");
for (MultipartFile file : files) {
System.out.println(file.getOriginalFilename());
}
System.out.println("===========");
return "ok";
}
运行结果
4、将上传的文件封装到JavaBean对象中
使用Ajax提交和使用表单提交，效果是一样的
前端代码
JavaBean代码，User.java
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String username;
private String password;
private MultipartFile photo;
private MultipartFile[] files;
}
后端代码
@ResponseBody
@PostMapping("/upload")
public String upload(User user) {
System.out.println(user.getId());
System.out.println(user.getUsername());
System.out.println(user.getPassword());
System.out.println(user.getPhoto().getOriginalFilename());
System.out.println("===========");
for (MultipartFile file : user.getFiles()) {
System.out.println(file.getOriginalFilename());
}
System.out.println("===========");
return "ok";
}
运行结果
5、JavaBean和上传文件分别封装
使用前端发送将user对象json字符串封装成blob对象，后端使用@RequestPart注解解析为JavaBean对象
前端代码
JavaBean，User.java
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String username;
private String password;
}
后端代码
@ResponseBody
@PostMapping("/upload")
public String upload(@RequestPart("user") User user, @RequestPart("photo") MultipartFile photo, @RequestPart("files") MultipartFile[] files) {
System.out.println(user);
System.out.println(photo.getOriginalFilename());
System.out.println("===========");
for (MultipartFile file : files) {
System.out.println(file.getOriginalFilename());
}
System.out.println("===========");
return "ok";
}
运行结果
精彩文章
您阅读本篇文章共花了：
发表评论