同学,你要的SpringBoot多图片上传回显功能已经实现了,赶紧收藏吃灰~
点击关注公众号,回复“2T”获取2TB学习资源!
互联网架构师后台回复 2T 有特别礼包
上一篇:深夜看了张一鸣的微博,让我越想越后怕
来源:https://www.jianshu.com/p/3e28b94444be
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: 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打对勾
感谢您的阅读,也欢迎您发表关于这篇文章的任何建议,关注我,技术不迷茫!小编到你上高速。
· END ·
最后,关注公众号互联网架构师,在后台回复:2T,可以获取我整理的 Java 系列面试题和答案,非常齐全。
正文结束
推荐阅读 ↓↓↓
1.不认命,从10年流水线工人,到谷歌上班的程序媛,一位湖南妹子的励志故事
2.如何才能成为优秀的架构师?
3.从零开始搭建创业公司后台技术栈
4.程序员一般可以从什么平台接私活?
5.37岁程序员被裁,120天没找到工作,无奈去小公司,结果懵了...
6.IntelliJ IDEA 2019.3 首个最新访问版本发布,新特性抢先看
7.这封“领导痛批95后下属”的邮件,句句扎心!
8.15张图看懂瞎忙和高效的区别!
一个人学习、工作很迷茫?
点击「阅读原文」加入我们的小圈子!
同学,你要的SpringBoot多图片上传回显功能已经实现了,赶紧收藏吃灰~相关推荐
- 你要的Spring Boot多图片上传回显功能已经实现了,赶紧收藏吃灰~
作者 | 不学无数的程序员 来源 | https://www.jianshu.com/p/3e28b94444be SpringBoot 2.0 多图片上传加回显 这两天公司有需求让做一个商户注册的后 ...
- 菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析 说明 一.图片路径分析 二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结 四.更新配置文件 说明 更新时间:202 ...
- springboot 实现图片上传功能
springboot 实现图片上传功能 这几天在做重构学校的图书馆项目,用sprinboot重新搭建项目,原项目是使用PHP搭建的,刚开始看着挺懵的,慢慢的就看懂.这个项目中遇到的难题是照片上传功能, ...
- SpringBoot+Thymeleaf图片上传
SpringBoot+Thymeleaf图片上传 首先需要添加本地图片映射 我是在启动类添加 @SpringBootApplication @MapperScan("com.example. ...
- 使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示
使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示 环境配置 准备环境 使用软件 图片上传 图片删除 图片显示 所有代码均为参考,每个人的方法不一样,效果不一样,该代 ...
- springboot入门系列教程|第九篇:springboot实现图片上传与显示(附源码)
前言## 上一篇我们介绍了springboot如何实现自定义拦截器配合注解使用,那么这篇我们将介绍springboot实现图片上传的功能. 目录## 文章目录 前言## 目录## 项目创建### 项目 ...
- springboot实现图片上传到又拍云中,并且保存图片外连接路径到数据库,外连接也可访问图片(一)
注册又拍云账号,申请一个云存储空间.如果开启服务状态,开启状态把必须要进行实名认证.开启状态之后,自行申请服务即可.申请完成之后,点击配置 进入下个页面不用管,直接点击存储管理. 拉到最下面查看管理员 ...
- Layui实现图片上传回显和删除
Layui实现图片上传回显和删除 需求及功能说明 前端代码详解 JS代码 总结 需求及功能说明 网页上传图片到服务器,图片在本地回显,可以实现删除,重新修改的操作. 相关组件来源于Layui上传文件模 ...
- themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 (非常详细,从创建项目开始)...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...
- Vue+Element+Springboot实现图片上传
最近没事刚好练习下vue+springboot前段后分离的项目.用上了图片上传功能.记录一下. 前端待提交的表单部分代码. <el-form-item label="封面图片" ...
最新文章
- java map深拷贝_java 实现Map的深复制
- WCF - 基础介绍
- 竟有如此沙雕的代码注释!
- html的表单标记格式,HTML表单标签
- 开源库UITableView+FDTemplateLayoutCell学习
- 【MySQL】性能优化之 Index Condition Pushdown
- JavaScript:年月日時分秒設置
- L325 如何睡觉
- redis运维问题集锦FAQ
- 51nod 1294 修改数组
- Spark的调度系统
- 【第126期】游戏策划:给@毛毛团的简历分析
- windows注册表启动项
- 手机连接 linux系统软件,linux上安卓手机管理软件及连接办法
- 【百练】1103Hangover宿醉(c语言)
- 大多数计算机有几个cpu,多处理器分配
- 04【前端工程化初探】Jenkines+GitLab+Tomcat流水线配置部署React应用
- tcpreplay的安装与使用
- YTU----1329: 手机尾号评分
- 三年前,故事这样开始 三年后,故事这样延续---2015年终总结
热门文章
- Paragon NTFS Mac官网版的下载安装与激活教程分享
- MySQL外键的三种关系
- Android 透明颜色值ARGB
- Phpcms v9 整合Discuz! X2.5 和UCenter 1.6.0详细教程
- 编写脚本常用的几种语句
- x5cloud云平台---------------网络彩讯
- aswing学习笔记2-不规则外框-请教思路
- 苹果mac视觉效果和动态图形设计软件:After Effects 2022 (ae 2022)
- M1升级MacOS Monterey后,如何使用空间音频?
- 视频特效制作After Effects 2022 for Mac