SpringBoot 2.0 多图片上传加回显

简介: 本文记录了在SpringBoot 2.0中实现商户注册后台功能时,处理多图片上传及回显的过程。通过使用`MultipartFile[]`接收前端传来的图片文件,并确保前后端参数名一致。展示了Controller、前端HTML和JS代码,以及配置文件中对上传图片大小的设置。还介绍了全局异常处理机制,使用`@ControllerAdvice`注解捕获异常。最后总结了一些常见问题及解决方法。

SpringBoot 2.0 多图片上传加回显

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

上传

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的参数名称是对应的

代码解读

复制代码

<div class="container">
    <div class="avatar-upload">
        <div class="avatar-edit">
            <input type='file' name="pictures" id="imageOne" accept=".png, .jpg, .jpeg"/>
            <label for="imageOne"></label>
        </div>
        <div class="avatar-preview">
            <div id="imageOnePreview"
                 style="background-image: url(http://ww3.sinaimg.cn/large/006tNc79ly1g556ca7ovqj30ak09mta2.jpg);">
            </div>
        </div>
    </div>
</div>

js代码回显

代码解读

复制代码

function readURLOne(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#imageOnePreview').css('background-image', 'url('+e.target.result +')');
            $('#imageOnePreview').hide();
            $('#imageOnePreview').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#imageOne").change(function() {
    readURLOne(this);
});

js代码上传

代码解读

复制代码

function getUpload(){
    //获取form表单中所有属性  key为name值
    var formData = new FormData($("#picForm")[0]);
    $.ajax({
        url: '/pic',
        type: 'POST',
        dataType:"json",
        data: formData,
        processData: false,
        contentType: false,
        success:(function(data) {
            window.confirm(data.message);
            window.location.reload();
        }),
        error:(function(res) {
            alert("失败");
        })
    });
}

效果展示

初始页面如下

上传完图片以后回显为

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

配置上传图片的属性

默认情况下只允许上传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 # 是否在文件或参数访问时延迟解析多部分请求


异常处理

异常处理用了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;
    }
}

遇到的坑

  • 如果返回值是模板文件的文件名,那么无论是类上还是方法上都不能加@ResponseBody注解,因为如果加了的话会被解析成Json串返回。
  • 注意前端所传参数名和后端接收参数名一一对应。不然会报405错误
  • 使用IDEA开发如果使用了lombok那么需要在Annotation Processors中将Enable annotation processing打对勾


转载来源:https://juejin.cn/post/6844903893332131854

目录
打赏
0
0
0
0
171
分享
相关文章
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
本文介绍了在Spring Boot中如何实现文件上传,包括单文件和多文件上传的实现,文件上传的表单页面创建,接收上传文件的Controller层代码编写,以及上传成功后如何在页面上遍历并显示上传的文件。同时,还涉及了`MultipartFile`类的使用和`@RequestPart`注解,以及在`application.properties`中配置文件上传的相关参数。
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
SpringBoot+Vue 实现图片验证码功能需求
这篇文章介绍了如何在SpringBoot+Vue项目中实现图片验证码功能,包括后端生成与校验验证码的方法以及前端展示验证码的实现步骤。
SpringBoot+Vue 实现图片验证码功能需求
基于 Spring Boot 3.3 + OCR 实现图片转文字功能
【8月更文挑战第30天】在当今数字化信息时代,图像中的文字信息越来越重要。无论是文档扫描、名片识别,还是车辆牌照识别,OCR(Optical Character Recognition,光学字符识别)技术都发挥着关键作用。本文将围绕如何使用Spring Boot 3.3结合OCR技术,实现图片转文字的功能,分享工作学习中的技术干货。
420 2
Spring boot +Thymeleaf 本地图片加载失败(图片路径)的问题及解决方法
这篇文章详细讲解了在Spring Boot应用程序中本地图片无法加载的问题原因,并提供了两个示例来说明如何通过使用正确的相对路径或Thymeleaf语法来解决图片路径问题。
Spring boot 本地图片不能加载(图片路径)的问题及解决方法
这篇文章讨论了Spring Boot应用程序中本地图片无法加载的问题,通常由图片路径不正确引起,并提供了使用正确的相对路径和Thymeleaf语法来解决这一问题的两种方法。
文本,文字识别,SpringBoot服务开发,SpringBoot如何提供上传服务,接口的设计,它做了将Base64重新转为图片,SpringBoot的应用实例,项目基础搭建
文本,文字识别,SpringBoot服务开发,SpringBoot如何提供上传服务,接口的设计,它做了将Base64重新转为图片,SpringBoot的应用实例,项目基础搭建
SpringBoot使用接口下载图片的写法
在Spring Boot中实现图片下载功能涉及定义一个REST接口来发送图片文件。首先,创建`ImageController`类,并在其中定义`downloadImage`方法,该方法使用`@GetMapping`注解来处理HTTP GET请求。方法内部,通过`Files.readAllBytes`读取图片文件到字节数组,再将该数组封装成`ByteArrayResource`。接着,设置`HttpHeaders`以指定文件名为`image.jpg`并配置为附件下载。
351 0
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
84 0
|
9月前
|
springboot文件上传分类保存并回显
springboot文件上传分类保存并回显
在springboot项目中实现将上传的jpg图片类型转为pdf并保存到本地
使用uniapp的uni.canvasToTempFilePath方法,将canvas内容转为jpg并上传至服务器。后端接收到jpg文件后,通过Java的PDFBox库进行处理。代码包括:选取画板内容为jpg,转换为临时文件路径,基于此路径生成File对象并上传,服务器端利用PDFBox处理上传的jpg文件。依赖:PDFBox 2.0.8。
124 3

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等