SpringMvc 完整上传文件流程（Ajax请求）头像，图片上传

1、config包下的操作

1.1、创建MyWebApplicationInit类

如何创建第一个SpringMvc步骤 以配置类的形式代替xml文件（点击链接查看）

1.2、设置文件大小（自定义）

1.3、创建SpringMvcConfig类 并实现 WebMvcConfigurer接口

@EnableWebMvc
public class SpringMvcConfig implements WebMvcConfigurer {//视图解析器@Beanpublic ViewResolver viewResolver() {InternalResourceViewResolver viewResolver =new InternalResourceViewResolver();viewResolver.setPrefix("/WEB-INF/views/");viewResolver.setSuffix(".jsp");return viewResolver;}//配置WebMvc相关配置，实现接口 WebMvcConfigurer//静态资源处理@Overridepublic void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {configurer.enable();}//文件解析器@Beanpublic MultipartResolver multipartResolver() {StandardServletMultipartResolver multipartResolver =new StandardServletMultipartResolver();return multipartResolver;}}

1.4、创建AppConfig类 @Import注解导入类

@Configuration
@ComponentScan("")//注解扫描如：com.xxx
@Import({SpringMvcConfig.class, SpringConfig.class})
public class AppConfig {}

1.5、我的config包下面的类

---

2、Service包下面的操作

2.1、定义接口FileService类

public interface FileService {public String upload(MultipartFile file, HttpServletRequest request) throws Exception;
}

2.2、创建FileServiceImpl并实现FileService接口

@Service
public class FileServiceImpl implements FileService {@Overridepublic String upload(MultipartFile file, HttpServletRequest request) throws Exception {//文件上传List<String> allowFile= Arrays.asList("jpg","png","gif","bmp");//1.获取文件的名String filename = file.getOriginalFilename();System.out.println("filename：文件名" + filename);String suffix = FileUtil.getSuffix(filename);//文件后缀名//    if (!allowFile.contains(suffix)){//         throw new FileUploadException("文件格式错误");//    }System.out.println("suffix：文件后缀" + suffix);byte[] bytes = file.getBytes();//文件大小System.out.println("bytes:文件大小" + bytes.length);//2.上传路径String path = request.getServletContext().getRealPath("/upload");FileUtil.writeBytes(bytes, path + "/" + filename);File dir = FileUtil.mkdir(path);if (!dir.exists()) {dir.mkdir();//创建文件夹}//3.拼接真实文件String uuid = IdUtil.randomUUID();File uploadFile = new File(path + "/" + uuid + "." + suffix);//上传文件file.transferTo(uploadFile);return uuid+"."+suffix;}
}

2.3、我的Service包

3、文件上传操作

3.1、创建xxx.jsp

注意要导入jquery

<script src="${pageContext.request.contextPath}/static/js/jquery.js"></script>>

<form id="userForm" action="${pageContext.request.contextPath}/user/add" method="post" enctype="multipart/form-data">姓名<input type="text" name="username"/><br><input type="text" id="avatar" name="avatar"/>头像<input type="file" id="file" name="file"/><br>预览 <div id="yulan"></div><br><input type="submit" value="上传"/>
</form>

3.2、发送ajax请求

$("#file").change(function () {let url = '${pageContext.request.contextPath}/upload';//发送ajax请求$.ajax({url: url,type: "post",//必须是postdata: new FormData($("#userForm")[0]),//带有 enctype="multipart/form-data"processData: false,//告诉JQuery不要去处理发送的数据contentType: false,//告诉JQuery不要去处理发送的数据success: function (res) {$("#avatar").val(res);//获取文件上传的图片并且展示let img=$("<img src='${pageContext.request.contextPath}/upload/"+res+"'>")$("#yulan").empty().append(img)},error: function () {alert("上传失败")}})})

3.3、控制层接收请求

 @RequestMapping(value = "/add",produces="application/json;charset=utf-8")public String add(SysUser sysUser) {System.out.println(sysUser.getUsername());System.out.println(sysUser.getAvatar());return "index";}

@RequiredArgsConstructor
@RestController
public class FilerController {private final FileService fileService;@RequestMapping("/upload")public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception {System.out.println("upload.class");System.out.println(file);return   fileService.upload(file, request);}}

3.4我的包

4、效果图

5、需要导入的jar包

<dependencies><dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>6.1.11</version>
</dependency><dependency>
<groupId>jakarta.servlet</groupId>
<artifactId>jakarta.servlet-api</artifactId>
<version>6.0.0</version>
</dependency><dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.34</version>
</dependency><dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>2.0.27</version>
</dependency><dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.17.2</version>
</dependency><dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.13.2</version>
<scope>test</scope>
</dependency><dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.8.27</version>
</dependency>
</dependencies>