Spring Boot 2.0 多图片上传加回显
点击上方蓝色“程序猿DD”,选择“设为星标”
回复“资源”获取独家整理的学习资料!
来源:http://r6f.cn/crEY
这两天公司有需求让做一个商户注册的后台功能,其中需要商户上传多张图片并回显。由于之前没做过这方面的东西,此篇文章用以记录一些知识点,以便后续查看。
上传
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: truemax-file-size: 20MBmax-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)@ResponseBodypublic ResponseEntity<String> nullOrEmptyExceptionHandler(HttpServletRequest request, NullOrEmptyException exception){log.info("nullOrEmptyExceptionHandler");return handleErrorInfo(request, exception.getMessage());}@ExceptionHandler(value = Exception.class)@ResponseBodypublic 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://github.com/modouxiansheng/Doraemon/tree/master/springdemo
往期推荐为什么 Java 中 1000==1000 为 false ?抖音创始人张一鸣:10 年面试 2000 人,混的好的人,都有一个特质黑客使用合法工具接管 Docker 和 Kubernetes 平台居然仅用浏览器,就完成了Spring Boot应用的开发与部署!Stack Overflow 2020 开发者调查中的 21 条关键结果
最后,推荐一个专注分享后端面试要点的公众号「后端面试那些事儿」,置顶标星。每日一篇常问的面试问题,秀的一批~扫描下方二维码关注!
Spring Boot 2.0 多图片上传加回显相关推荐
- SpringBoot 2.0 多图片上传加回显
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 本文来源:http://r6f.cn/crEY 这两天公司 ...
- themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 (非常详细,从创建项目开始)...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...
- java前端接收回显图片_图片上传并回显后端篇
图片上传并回显后端篇 我们先看一下效果 继上一篇的图片上传和回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传的文件,是以什么样的形式上传到服务器,难道也是一 ...
- layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
- 阿里云对象存储OSS图片上传并回显
阿里云对象存储OSS图片上传并回显 Java代码实现 引入依赖 <!-- 引入阿里云OSS依赖--><dependency><groupId>com.aliyun. ...
- php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 效果图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...
- vue中使用wangeditor富文本编辑器(含图片上传和回显)
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
- Spring Boot 实现多图片上传并回显,涨姿势了~
上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可.由于是多图片上传所以用数组来接.此处应该注意参数名应该和<input> ...
- element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显 而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
最新文章
- http 缓存分为客户端缓存和服务端缓存
- 从Git存储库中删除文件而不从本地文件系统中删除它
- 【错误记录】Android Studio 向 GitHub 提交代码报错 ( Push failed: Failed with error: Could not read | 使用命令行提交代码 )
- linux下signal()函数超详细介绍
- stm32之spi之NSS管脚信号
- 服务器环境~某个页面无法访问的处理
- c# ui 滚动 分页_UI备忘单:分页,无限滚动和“加载更多”按钮
- 不当败家子的原因......
- mysql 键缓冲区_mysql:键缓存
- 重庆地方税务局报税客户端升级导致的问题
- Linux内核源代码分析-第二章 代码初识-2
- 微信小程序轮播图swiper使用
- 新装linux系统没有网卡驱动的解决方法
- RPLIDAR激光雷达测试
- 使用Java编写一个简单的Web的监控系统cpu利用率,cpu温度,总内存大小
- 重磅!《中国DevOps现状调查报告(2021年)》正式发布!(附报告获取方式)
- 穷举暴力破解密码(真香版)
- animation动画几种效果
- ASP.NET文件后缀名
- Android的媒体播放器——简易视频播放器(详解)