spring boot实现上传图片并在页面上显示及遇到的问题小结
最近在使用spring boot搭建网站的过程之中遇到了这样一个问题：用户注册时需要上传一个属于自己的头像，注册成功之后跳转到个人中心，在个人中心中显示用户信息.其中在显示头像的时候遇到了问题：上传头像的时候，我把头像存放到了项目文件下的static文件夹中，将其地址存放到了数据库对应的用户中，并且在idea中添加了热部署，但是在注册跳转到个人中心后还是无法显示头像，只有在下一次启动项目进入到个人中心时才可以。
被这个问题困扰了许久，最后是这样的解决的：在main目录下新建了一个webapp文件夹，并且对其路径进行了配置。下面是一个解决方案的小demo，做的比较简单，请见谅~~核心代码如下:
注册界面：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<form action="/zhuce" th:action="@{/zhuce}" method="post" enctype="multipart/form-data" >
<label>姓名</label><input type="text" name="name"/>
<label>密码</label><input type="password" name="password"/>
<label>上传图片</label>
<input type="file" name="file"/>
<input type="submit" value="上传"/>
</form>
</body>
</html>
control如下:
package com.example.demo.control;
import com.example.demo.dao.UserRepository;
import com.example.demo.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
/**
* Created by 18274 on 2017/8/9.
*/
@Controller
public class Control {
@Autowired
UserRepository userRepository;
@GetMapping(value="/zhuce")
public String zhuce(){
return "zhuce";
}
@PostMapping(value="/zhuce")
public String tijiao(@RequestParam(value="name") String name,
@RequestParam(value="password") String password,
@RequestParam(value="file")MultipartFile file,
Model model) {
User user = new User();
user.setUsername(name);
user.setPassword(password);
if (!file.isEmpty()) {
try {
BufferedOutputStream out = new BufferedOutputStream(
new FileOutputStream(new File("f:\\旗杯\\demo5\\src\\main\\webapp\\"+name+".jpg")));//保存图片到目录下
out.write(file.getBytes());
out.flush();
out.close();
String filename="f:\\旗杯\\demo5\\src\\main\\webapp\\"+name+".jpg";
user.setTupian(filename);
userRepository.save(user);//增加用户
} catch (FileNotFoundException e) {
e.printStackTrace();
return "上传失败," + e.getMessage();
} catch (IOException e) {
e.printStackTrace();
return "上传失败," + e.getMessage();
}
model.addAttribute(user);
return "permanager";
} else {
return "上传失败，因为文件是空的.";
}
}
}
个人中心：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<p>用户名:</p>
<p th:text="${user.username}"></p>
<p>图片:</p>
<img th:src="@{${user.username}+'.jpg'}"/>
</body>
</html>
对webapp路径的配置
package com.example.demo.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* Created by 18274 on 2017/8/9.
*/
@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurerAdapter{
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/src/main/webapp/**").addResourceLocations("classpath:/webapp/");
super.addResourceHandlers(registry);
}
}
对应的用户实体类:
package com.example.demo.domain;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
/**
* Created by 18274 on 2017/8/9.
*/
@Entity
public class User {
@Id
@GeneratedValue
private Long id;
private String username;
private String password;
private String tupian;//图片地址
public User(){}
public Long getId() {
return id;
}
public String getUsername() {
return username;
}
public String getPassword() {
return password;
}
public String getTupian() {
return tupian;
}
public void setId(Long id) {
this.id = id;
}
public void setUsername(String username) {
this.username = username;
}
public void setPassword(String password) {
this.password = password;
}
public void setTupian(String tupian) {
this.tupian = tupian;
}
}
用户实体类的接口：
package com.example.demo.dao;
import com.example.demo.domain.User;
import org.springframework.data.jpa.repository.JpaRepository;
/**
* Created by 18274 on 2017/8/9.
*/
public interface UserRepository extends JpaRepository<User,Long>{
}
最后运行如下：
注册上传头像：
个人中心：
ps：如果在结合spring security的话，只需要从session.SPRING_SECURITY_CONTEXT.authentication.principal.XXX中取得信息即可。
附上传的这个小demo的地址：
http://xiazai.jb51.net/201712/yuanma/demo5(jb51.net).rar
总结
以上所述是小编给大家介绍的spring boot实现上传图片并在页面上显示及遇到的问题小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
spring boot 图片上传与显示功能实例详解
首先描述一下问题,spring boot 使用的是内嵌的tomcat, 所以不清楚文件上传到哪里去了, 而且spring boot 把静态的文件全部在启动的时候都会加载到classpath的目录下的,所以上传的文件不知相对于应用目录在哪,也不知怎么写访问路径合适,对于新手的自己真的一头雾水. 后面想起了官方的例子,没想到一开始被自己找到的官方例子,后面太依赖百度谷歌了,结果发现只有官方的例子能帮上忙,而且帮上大忙,直接上密码的代码 package hello; import static org
-
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
-
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实现上传图片并在页面上显示及遇到的问题小结
最近在使用spring boot搭建网站的过程之中遇到了这样一个问题:用户注册时需要上传一个属于自己的头像,注册成功之后跳转到个人中心,在个人中心中显示用户信息.其中在显示头像的时候遇到了问题:上传头像的时候,我把头像存放到了项目文件下的static文件夹中,将其地址存放到了数据库对应的用户中,并且在idea中添加了热部署,但是在注册跳转到个人中心后还是无法显示头像,只有在下一次启动项目进入到个人中心时才可以. 被这个问题困扰了许久,最后是这样的解决的:在main目录下新建了一个webapp文件
-
java基于spring boot本地上传图片示例解析
前几天项目中刚好需要上传图片的需求,当时想的是用七牛云,因为我用七牛云也用了好几次,就是把图片上传到七牛云空间里面,数据库里面保存的是这张上传图片的url地址 那么页面访问也就很方便,考虑到项目部署的环境我就用了本地上传,不牵涉数据库的操作.我就花了半个小时写了个本地上传图片的小demo.非常的简单. 下面是需要的依赖 pom.xml文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=
-
Spring boot 实现单个或批量文件上传功能
一:添加依赖: <!-- thymeleaf模板插件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- jsp依赖 --> <dependency> <groupId>j
-
Spring boot的上传图片功能实例详解
简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 特点 1. 创建独立的Spring应用程序 2. 嵌入的Tomcat,无需部署WAR文件 3. 简化Maven配置 4. 自动配置Spring 5. 提
-
Java中Spring Boot+Socket实现与html页面的长连接实例详解
Spring Boot+Socket实现与html页面的长连接,客户端给服务器端发消息,服务器给客户端轮询发送消息,附案例源码 功能介绍 客户端给所有在线用户发送消息客户端给指定在线用户发送消息服务器给客户端发送消息(轮询方式) 注意:socket只是实现一些简单的功能,具体的还需根据自身情况,代码稍微改造下 项目搭建 项目结构图 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xml
-
Spring boot 跳转到jsp页面的实现方法
本人正在学习Spring boot,搜索了很多关于Spring boot 跳转到jsp页面的实现方法介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. @Controller注解 1.application.properties文件中配置 # 配置jsp文件的位置,默认位置为:src/main/webapp spring.mvc.view.prefix=/pages/ # 配置jsp文件的后缀 spring.mvc.view.suffix=.jsp 2.Controlle
-
spring cloud将spring boot服务注册到Eureka Server上的方法
开篇: 我们将前面的springboot整合H2内存数据库,实现单元测试与数据库无关性提供的Restful服务注册到spring cloud的Eureka Server上. 一.引入Eureka的Client </dependencies> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-eureka</ar
-
Spring Boot 会员管理系统之处理文件上传功能
温馨提示 Spring Boot会员管理系统的中,需要涉及到Spring框架,SpringMVC框架,Hibernate框架,thymeleaf模板引擎.所以,可以学习下这些知识.当然,直接入门的话使用是没问题,但是,涉及到一些异常和原理的话可能就有些困难. 1. 前端部分 在前端部分addMember.html是通过form表单来提交会员的信息,其中就包括了图片上传功能(这里涉及了文件上传操作),表单部分代码如下: <form th:action="@{/admin/addMember}
-
Spring Boot整合EasyExcel(完整版包含上传解析excel和下载模板)
1. 加入依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.2.7</version> </dependency> 2. 对读取excel内容(批量添加) @PostMapping("plUpdate") public R plUpdate(@Request
-
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
date.csv:"ID" "NAME" "EMAIL""1" "小明" "xm@163.com""2" "小东" "xd@sina.com""3" "小少" "shaozi@hotmai.com" 读取这个csv文件 复制代码 代码如下: <?php$handl