Spring Boot 实现多图片上传并回显，涨姿势了～

不念不忘少年蓝@ 2022-09-01 07:58 184阅读 0赞

作者：不学无数的程序员  
链接：[https://www.jianshu.com/p/3e28b94444be][https_www.jianshu.com_p_3e28b94444be]

这两天公司有需求让做一个商户注册的后台功能，其中需要商户上传多张图片并回显。由于之前没做过这方面的东西，此篇文章用以记录一些知识点，以便后续查看。

## 上传 ##

Controller的代码非常简单，由于用了SpringMVC框架，所以直接用`MultipartFile`来接即可。由于是多图片上传所以用**数组**来接。**此处应该注意参数名应该和`<input>`中的`name`值相对应：**

@RequestMapping("/pic")
    @ResponseBody
    public ResponseEntity<String> pic(MultipartFile [] pictures) throws Exception {
        ResponseEntity<String> responseEntity = new ResponseEntity<>();
        long count = Arrays.asList(pictures).stream().
                map(MultipartFile::getOriginalFilename).
                filter(String::isEmpty).count();
        if (count == pictures.length){
            responseEntity.setCode(ResponseEntity.ERROR);
            throw new NullOrEmptyException("图片不能同时为空");
        }
        responseEntity.setCode(ResponseEntity.OK);
        responseEntity.setMessage("上传成功");
        return responseEntity;
    }

前端页面的代码，**此处的`name`值和`Controller`的参数名称是对应的：**

js代码回显

js代码上传

## 效果展示 ##

初始页面如下

![20210727095049866.png][]

上传完图片以后回显为

![202107270950508.png][]

点击提交以后可将图片上传至后台

## 配置上传图片的属性 ##

默认情况下只允许上传1MB以下的图片，如果要设置上传图片大小。那么需要在配置文件中如下配置

spring:
      servlet:
        multipart:
          enabled: true
          max-file-size: 20MB
          max-request-size: 20MB

关于文件的配置有下面几个

spring.servlet.multipart.enabled=true # 是否支持多文件上传
    spring.servlet.multipart.file-size-threshold=0B # 文件写入磁盘的阈值
    spring.servlet.multipart.location= # 上传文件的保存地址
    spring.servlet.multipart.max-file-size=1MB # 上传文件的最大值
    spring.servlet.multipart.max-request-size=10MB # 请求的最大值
    spring.servlet.multipart.resolve-lazily=false # 是否在文件或参数访问时延迟解析多部分请求

Spring Boot 基础教程和示例源码：[https://github.com/javastacks/spring-boot-best-practice][https_github.com_javastacks_spring-boot-best-practice]

## 异常处理 ##

异常处理用了Springboot提供的全局异常处理机制。只需要在类上加入`@ControllerAdvice`注解即可。在方法上加入`@ExceptionHandler(想要拦截的异常类)`就能拦截所有`Controller`的异常了。

如果想要拦截指定为特定的`Controller`只需要在`@ControllerAdvice(basePackageClasses=想要拦截的Controller)`

@ControllerAdvice
    @Slf4j
    public class CommonExceptionHandler extends ResponseEntityExceptionHandler {
    
        @ExceptionHandler(NullOrEmptyException.class)
        @ResponseBody
        public ResponseEntity<String> nullOrEmptyExceptionHandler(HttpServletRequest request, NullOrEmptyException exception){
            log.info("nullOrEmptyExceptionHandler");
            return handleErrorInfo(request, exception.getMessage());
        }
    
        @ExceptionHandler(value = Exception.class)
        @ResponseBody
        public ResponseEntity<String> defaultErrorHandler(HttpServletRequest request, Exception exception){
            log.info("defaultErrorHandler");
            return handleErrorInfo(request, exception.getMessage());
        }
    
        private ResponseEntity<String> handleErrorInfo(HttpServletRequest request, String message) {
            ResponseEntity<String> responseEntity = new ResponseEntity<>();
            responseEntity.setMessage(message);
            responseEntity.setCode(ResponseEntity.ERROR);
            responseEntity.setData(message);
            responseEntity.setUrl(request.getRequestURL().toString());
            return responseEntity;
        }
    }

## 遇到的坑 ##

1、如果返回值是模板文件的文件名，那么无论是类上还是方法上都不能加`@ResponseBody`注解，因为如果加了的话会被解析成Json串返回。

2、注意前端所传参数名和后端接收参数名一一对应。不然会报**405错误**

3、使用IDEA开发如果使用了`lombok`那么需要在`Annotation Processors`中将`Enable annotation processing`打对勾

![20210727095050193.png][]

**近期热文推荐：**

1.[1,000+ 道 Java面试题及答案整理(2021最新版)][1_000_ _ Java_2021]

2.[终于靠开源项目弄到 IntelliJ IDEA 激活码了，真香！][IntelliJ IDEA]

3.[阿里 Mock 工具正式开源，干掉市面上所有 Mock 工具！][Mock _ Mock]

4.[Spring Cloud 2020.0.0 正式发布，全新颠覆性版本！][Spring Cloud 2020.0.0]

5.[《Java开发手册（嵩山版）》最新发布，速速下载！][Java]

觉得不错，别忘了随手点赞+转发哦！

[https_www.jianshu.com_p_3e28b94444be]: https://www.jianshu.com/p/3e28b94444be
[20210727095049866.png]: /images/20220829/32ce9c54926f4c229fd616979e41f00a.png
[202107270950508.png]: /images/20220829/6501d30a89444c3887fb4ae284cd0516.png
[https_github.com_javastacks_spring-boot-best-practice]: https://github.com/javastacks/spring-boot-best-practice
[20210727095050193.png]: /images/20220829/3e2a014733c141a2b74b4ca518900992.png
[1_000_ _ Java_2021]: https://www.javastack.cn/mst/
[IntelliJ IDEA]: http://www.javastack.cn/article/2020/intellij-idea-by-open-source-project/
[Mock _ Mock]: http://www.javastack.cn/article/2021/alibaba-testable-mock-released/
[Spring Cloud 2020.0.0]: http://www.javastack.cn/article/2020/spring-cloud-2020.0.0-released/
[Java]: http://www.javastack.cn/article/2020/alibaba-release-java-develop-rules-songshan/