溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在使用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實現上傳圖片并在頁面上顯示及遇到的問題小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
