Spring Boot 2.0 多图片上传加回显
公众号程序猿DD
共 4204字,需浏览 9分钟
· 2020-09-19
来源:http://r6f.cn/crEY
这两天公司有需求让做一个商户注册的后台功能,其中需要商户上传多张图片并回显。由于之前没做过这方面的东西,此篇文章用以记录一些知识点,以便后续查看。
Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile
来接即可。由于是多图片上传所以用数组来接。此处应该注意参数名应该和中的
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
的参数名称是对应的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://github.com/modouxiansheng/Doraemon/tree/master/springdemo
往期推荐
最后,推荐一个专注分享后端面试要点的公众号「后端面试那些事儿」,置顶标星。每日一篇常问的面试问题,秀的一批~扫描下方二维码关注!
评论
学一学 Spring Boot 3.x
在 Java 后端开发领域,功能强大的 Spring 开源框架不仅是首选,也是事实上的标准。但由于 Spring 存在配置烦琐、部署不易、依赖管理困难等问题,因此基于 Spring 的快速开发框架 Spring Boot 应运而生,它能大大简化 Spring 应用程序的配置和部署过程。2018 年,
小哈学Java
0
SpringBoot 实现图片防盗链功能
程序员的成长之路互联网/程序员/技术/资料共享 关注阅读本文大概需要 4 分钟。来自:blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑,我们需要后端返回的图片只允许在某个网站内展示,不想被爬虫拿到图片地
程序员的成长之路
0
SpringBoot+Minio实现上传凭证、分片上传、秒传和断点续传
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好,我是你们的朋友架构君,一个会写代码吟诗的架构师。Spring Boot整合Minio后,前端的文件上传有两种方式:1、文件上传到后端,由后端保存到Minio这种方式好处是完全由后端集中管理,可以很好的做到、身份验证、
Java架构师社区
0
不到10年,青岛万象城“老态”渐显?
出品/联商专栏撰文/吴明毅编辑/娜娜近段时间,开业近10年的青岛万象城忽而受到了业界的广泛关注,究其原因在于它不仅是国内首批上市商业REITs项目之一,且还是估值最高的项目,高达82亿。因此有不少知名媒体/自媒体、各类机构对其进行了细致拆解与分析、预测,可统观之后却发现:大多“有肉无骨、华而不实”,
联商网资讯
9
多文件夹下Excel指定列的提取合并
点击上方“Python爬虫与数据挖掘”,进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤红豆生南国,春来发几枝。一、前言大家好,我是崔艳飞,工作中经常遇到,从多个文件夹下的Excel中,提取指定列,再合并成新的Excel。几个文件夹还能应付,但要是有成百上千个文件夹,你就要
Python爬虫与数据挖掘
3
Spring Boot + flowable 快速实现工作流
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好,我是你们的朋友架构君,一个会写代码吟诗的架构师。来源:blog.csdn.net/zhan107876/article/details/120815560总览一、flowable-ui部署运行二、绘制流程图绘图细节:
Java架构师社区
0
永久激活GPT4.0 + 多模态(文生图+图片解析)!终身使用!我上车了
GPT 4.0,太牛了🔥!!用GPT4.0生成个代码,轻轻松松就能帮你搞定如果你有想拍视频的想法,或者从事相关新媒体职业,那这个视频脚本生成就很适合你GPT4.0好用是好用,但它的价格也是真贵啊!一个月要 20 美元,折合大概 150 块人民币,一年就是 1800。MJ 绘画更是高攀不起的
Python客栈
0
再获殊荣!乐普新品平板多参数监护仪荣获两项国际大奖
近日,乐普新品平板多参数监护仪AIView VX凭借创新前瞻的设计理念及卓越不凡的产品体验,一举斩获“2024年德国iF设计奖”和“2024年德国红点奖”两项国际大奖,再度彰显乐普独特产品魅力及研发与工业设计的强大实力。作为国际公认的全球工业设计顶级奖项,红点设计奖与德国“iF奖”、美国“IDEA奖
乐普医疗AI
1