Spring Boot 实现图片上传并回显功能
一、常规形式
1 项目结构
2 配置文件及环境设置
（1）配置文件
# 应用服务 WEB 访问端口 server.port=8080 # spring 静态资源扫描路径 spring.resources.static-locations=classpath:/static/ # 访问template下的html文件需要配置模板 spring.thymeleaf.prefix.classpath=classpath:/templates/ # 是否启用缓存 spring.thymeleaf.cache=false # 模板文件后缀 spring.thymeleaf.suffix=.html # 模板文件编码 spring.thymeleaf.encoding=UTF-8 #上传的绝对路径 file.upload.path=G://images/ #最关键# #绝对路径下的相对路径 file.upload.path.relative=/images/** #最关键# #设置文件最大值 spring.servlet.multipart.max-file-size=5MB
在相关路径新建文件夹
3 代码
（1）pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
（2）index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="../upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept="image/*">
<br>
<input type="text" value="">
<input type="submit" value="上传" class="btn btn-success">
</form>
[[${filename}]]
<br>
<img th:src="@{${filename}}" alt="图片">
</body>
</html>
（3）TestController.java
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
@Controller
public class TestController {
/**
* 上传地址
*/
@Value("${file.upload.path}")
private String filePath;
// 跳转上传页面
@RequestMapping("test")
public String test() {
return "Page";
}
// 执行上传
@RequestMapping("upload")
public String upload(@RequestParam("file") MultipartFile file, Model model) {
// 获取上传文件名
String filename = file.getOriginalFilename();
// 定义上传文件保存路径
String path = filePath + "rotPhoto/";
// 新建文件
File filepath = new File(path, filename);
// 判断路径是否存在，如果不存在就创建一个
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
try {
// 写入文件
file.transferTo(new File(path + File.separator + filename));
} catch (IOException e) {
e.printStackTrace();
}
// 将src路径发送至html页面
model.addAttribute("filename", "/images/rotPhoto/" + filename);
return "index";
}
}
（4）MyWebAppConfigurer
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* 资源映射路径
*/
@Configuration
public class MyWebAppConfigurer implements WebMvcConfigurer {
/**
* 上传地址
*/
@Value("${file.upload.path}")
private String filePath;
/**
* 显示相对地址
*/
@Value("${file.upload.path.relative}")
private String fileRelativePath;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler(fileRelativePath).
addResourceLocations("file:/" + filePath);
}
}
4 测试
二、增加异步操作
1 前端ajax
<div class="modal-body">
<form method="post" enctype="multipart/form-data">
<input type="file" name="file" id="img">
<input type="button" value="上传" class="btn btn-outline-primary" onclick="uploadFile()"
style="width: 30%;">
</form>
</div>
<script>
//上传文件
function uploadFile() {
//formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value
var myform = new FormData();
// 此时可以调用append()方法来添加数据
myform.append('file', $("#img")[0].files[0]);
//验证不为空
var file = $("#img")[0].files[0];
if (file == null) {
alert("请选择文件");
return false;
} else {
$.ajax({
url: "/user/upLoad",
type: "POST",
data: myform,
async: false,
contentType: false,
processData: false,
success: function (result) {
console.log(result);
alert("上传成功！");
$("#div_show_img").html("<img id='input_img' src='" + result + "'>");
$("#imgPath").attr("value", result);
$("#div_upload").removeClass("show");
},
error: function (data) {
alert("系统错误");
}
});
}
}
</script>
2 后端Controller
@ResponseBody
@RequestMapping("/upLoad")
public String upLoadImage(@RequestParam("file") MultipartFile file) {
// 获取上传文件名
String filename = file.getOriginalFilename();
String suffixName = filename.substring(filename.lastIndexOf("."));
// 定义上传文件保存路径
String path = filePath + "images/";
//生成新的文件名称
String newImgName = UUID.randomUUID().toString() + suffixName;
// 新建文件
File filepath = new File(path, newImgName);
// 判断路径是否存在，如果不存在就创建一个
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
try {
// 写入文件
file.transferTo(new File(path + File.separator + newImgName));
} catch (IOException e) {
e.printStackTrace();
}
return "/images/images/" + newImgName;
}
到此这篇关于Spring Boot 实现图片上传并回显功能的文章就介绍到这了,更多相关Spring Boot上传图片回显内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
spring boot实现上传图片并在页面上显示及遇到的问题小结
最近在使用spring boot搭建网站的过程之中遇到了这样一个问题:用户注册时需要上传一个属于自己的头像,注册成功之后跳转到个人中心,在个人中心中显示用户信息.其中在显示头像的时候遇到了问题:上传头像的时候,我把头像存放到了项目文件下的static文件夹中,将其地址存放到了数据库对应的用户中,并且在idea中添加了热部署,但是在注册跳转到个人中心后还是无法显示头像,只有在下一次启动项目进入到个人中心时才可以. 被这个问题困扰了许久,最后是这样的解决的:在main目录下新建了一个webapp文件
-
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
整合前的准备步骤 1.搭建好基础框架,本文用的是SSM(Spring+SpringMVC+Mybatis),这里的过程就不在本文中讲了,之前我做个一个demo(ssm整合+用户模块),可以参考这个搭建好. 2.下载bootstrap fileinput组件源码: https://github.com/kartik-v/bootstrap-fileinput/ 搭建后的效果图 图1. 图2. 图3. 图4. 图5. 在需要编写的jsp页面引入组件 本工程的路径界面如下: 在jsp引入组件需要的js
-
基于Spring Boot利用 ajax实现上传图片功能
效果如下: 1.启动类中加入 SpringBoot重写addResourceHandlers映射文件路径 @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/E/"); } 设置静态资源路径 2. 表单
-
Spring boot的上传图片功能实例详解
简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 特点 1. 创建独立的Spring应用程序 2. 嵌入的Tomcat,无需部署WAR文件 3. 简化Maven配置 4. 自动配置Spring 5. 提
-
Spring Boot 实现图片上传并回显功能
一.常规形式 1 项目结构 2 配置文件及环境设置 (1)配置文件 # 应用服务 WEB 访问端口 server.port=8080 # spring 静态资源扫描路径 spring.resources.static-locations=classpath:/static/ # 访问template下的html文件需要配置模板 spring.thymeleaf.prefix.classpath=classpath:/templates/ # 是否启用缓存 spring.thymeleaf.cac
-
spring boot实现图片上传到后台的功能(浏览器可直接访问)
目录 1. 配置上传文件最大数值 2. 配置虚拟路径映射 3. 编写controller程序 4. 测试 1. 配置上传文件最大数值 默认情况下,在spring boot嵌入的tomcat限制了上传文件的大小,在spring boot的我官方文档中说明,每个文件的最大配置为1Mb,单次请求的总文件数不能大于10Mb. 这意味着如果你上传的图片大于1Mb,会被拦截下来,无法正常保存到后台,并抛出一个错误,返回状态码:500. The field file exceeds its maximum p
-
利用node+koa+axios实现图片上传和回显功能
目录 前言 开发前需要掌握的一些库 代码结构 实现代码 前言 代码地址 开发前需要掌握的一些库 koa:用来起一个web服务器 koa2-cors: 解决跨域问题 @koa/router: koa的路由处理 koa-body: koa参数的获取 koa-static: 静态内容 @koa/multer multer:图片上传的插件 代码结构 实现代码 1.第一步:用koa+koa-router搭建一个简单的web服务 //main.js const Koa = require('koa') //
-
spring boot实现图片上传和下载功能
这篇博客简单介绍下spring boot下图片上传和下载,已经遇到的问题.首先需要创建一个spring boot项目. 1.核心的controller代码 package com.qwrt.station.websocket.controller; import com.alibaba.fastjson.JSONObject; import com.qwrt.station.common.util.JsonUtil; import org.slf4j.Logger; import org.slf
-
spring boot thymeleaf 图片上传web项目根目录操作步骤
thymeleaf介绍 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签属性,所以 t
-
SpringBoot2.0实现多图片上传加回显
目录 上传 效果展示 配置上传图片的属性 异常处理 遇到的坑 完整代码地址 这两天公司有需求让做一个商户注册的后台功能,其中需要商户上传多张图片并回显.由于之前没做过这方面的东西,此篇文章用以记录一些知识点,以便后续查看. 上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可.由于是多图片上传所以用数组来接.此处应该注意参数名应该和<input>中的name值相对应 @RequestMapping("/pic"
-
解决layui富文本编辑器图片上传无法回显的问题
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久才找到原来是返回的数据结构不符合layui要求,经过修改才得以解决,现在把代码贴出来共享.加粗字体的代码是返回数据结构 @ResponseBody @RequestMapping(value = "fillupf", method = RequestMethod.POST) pu
-
如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 效果图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下. 大概的样式 还是放一下源码,只谈效果,不放源码的都是耍流氓 这是body <body> <div class="
-
Spring Boot实现图片上传功能
本文实例为大家分享了Spring Boot图片上传的具体代码,供大家参考,具体内容如下 package com.clou.inteface.domain.web.user; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.Map; import org.apache.commons.lang3.StringUtils; import org.springfram
-
Spring Boot实现图片上传/加水印一把梭操作实例代码
概述 很多网站的图片为了版权考虑都加有水印,尤其是那些图片类网站.自己正好最近和图片打交道比较多,因此就探索了一番基于 Spring Boot这把利器来实现从 图片上传 → 图片加水印 的一把梭操作! 本文内容脑图如下: 本文内容脑图 搭建 Spring Boot基础工程 过程不再赘述了,这里给出 pom中的关键依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId>