Spring Boot 实现多图片上传并回显,涨姿势了~
上传
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("失败");})});
}
效果展示
初始页面如下
上传完图片以后回显为
点击提交以后可将图片上传至后台。另外,Spring Boot 系列面试题和答案全部整理好了,微信搜索Java技术栈,在后台发送:面试,可以在线阅读。
配置上传图片的属性
默认情况下只允许上传1MB以下的图片,如果要设置上传图片大小。那么需要在配置文件中如下配置:
spring:servlet:multipart:enabled: truemax-file-size: 20MBmax-request-size: 20MB
Spring Boot 基础教程和示例源码:https://github.com/javastacks/spring-boot-best-practice
关于文件的配置有下面几个
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;}
}
遇到的坑
1、如果返回值是模板文件的文件名,那么无论是类上还是方法上都不能加@ResponseBody
注解,因为如果加了的话会被解析成Json串返回。
2、注意前端所传参数名和后端接收参数名一一对应。不然会报405错误
3、使用IDEA开发如果使用了lombok
那么需要在Annotation Processors
中将Enable annotation processing
打对勾
Spring Boot 实现多图片上传并回显,涨姿势了~相关推荐
- themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 (非常详细,从创建项目开始)...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...
- 阿里云对象存储OSS图片上传并回显
阿里云对象存储OSS图片上传并回显 Java代码实现 引入依赖 <!-- 引入阿里云OSS依赖--><dependency><groupId>com.aliyun. ...
- java前端接收回显图片_图片上传并回显后端篇
图片上传并回显后端篇 我们先看一下效果 继上一篇的图片上传和回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传的文件,是以什么样的形式上传到服务器,难道也是一 ...
- layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
- php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 效果图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...
- vue中使用wangeditor富文本编辑器(含图片上传和回显)
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
- Spring Boot 2.0 多图片上传加回显
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源:http://r6f.cn/crEY 这两天公司有 ...
- 第12章[12.10.1] Ext JS + CKEditor+Spring Boot 实现编辑器图片上传
CKEditor 支持多种图片上传实现方式, 可以直接使用CKEditor 提供的云服务,不过这个服务是收费的, 而且上传的图片如果安全性要求较高,该方式可能不适合.本篇基于Spring Boot实现 ...
- SpringBoot 2.0 多图片上传加回显
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 本文来源:http://r6f.cn/crEY 这两天公司 ...
最新文章
- vs2012html图片,简单几步 实现vs2010对html5的支持
- SQL优化笔记分享:34条实用经验可别错过
- 策略模式(stragegy)
- git ssh配置完后拉取代码_Git中SSH key配置秘钥生成和如何拉取代码
- 用Cocos2dx开发棋牌游戏的观点解析
- 高可用Eureka注册中心配置说明(双机部署)
- python绘制社会关系网络图_Python networkx 网络图绘制
- Java实现XSS防御
- C/C++日志写入系统log(/var/log/syslog)
- ShadeGraph教程之节点详解6:Procedural Nodes
- win7录屏_win7系统自带的录屏工具你用过吗?
- vscode如何查看修改过的部分_如何查看和修改Windows远程桌面端口
- 我的JDBC通用DAO(续)
- 软件评测师该如何自学?如何指定计划?
- matlab 向量的基本运算
- 上海市五险一金及税后工资计算器
- 前端面试题(css)
- 当年校招时,我就死在这个问题上...
- 字节后端开发工程师-基础架构 二面面经
- 前端面试题型汇总(适合应届/社招1年水平)
热门文章
- R语言caret包构建机器学习回归模型(regression model)、使用DALEX包进行模型解释分析、特征重要度、偏依赖分析等
- R语言广义线性模型函数GLM、glm函数构建泊松回归模型、模型中存在过离散(Overdispersion)、则将连接函数从possion函数替换为quasipoisson函数重新构建泊松回归模型
- R双样本t检验(WELCH TWO-SAMPLE T-TEST)
- 流数据分析平台Storm简介
- 计算机英语unit,计算机专业英语Unit 7
- R Learnilng 十八讲1-6
- const reference const
- oracle之 手动创建 emp 表 与 dept 表
- 威纶通触摸屏与mysql_威纶通 与 信捷XC\XD系列PLC 通讯
- python 查看 nvida 驱动、 cuda、pytorch、tensorflow的版本