溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

spring boot實(shí)現(xiàn)上傳圖片并在頁面上顯示及遇到的問題小結(jié)

發(fā)布時(shí)間：2020-08-28 16:27:06 來源：腳本之家 閱讀：343 作者：浮閑 欄目：編程語言

最近在使用spring boot搭建網(wǎng)站的過程之中遇到了這樣一個(gè)問題：用戶注冊時(shí)需要上傳一個(gè)屬于自己的頭像，注冊成功之后跳轉(zhuǎn)到個(gè)人中心，在個(gè)人中心中顯示用戶信息.其中在顯示頭像的時(shí)候遇到了問題：上傳頭像的時(shí)候，我把頭像存放到了項(xiàng)目文件下的static文件夾中，將其地址存放到了數(shù)據(jù)庫對應(yīng)的用戶中，并且在idea中添加了熱部署，但是在注冊跳轉(zhuǎn)到個(gè)人中心后還是無法顯示頭像，只有在下一次啟動(dòng)項(xiàng)目進(jìn)入到個(gè)人中心時(shí)才可以。

被這個(gè)問題困擾了許久，最后是這樣的解決的：在main目錄下新建了一個(gè)webapp文件夾，并且對其路徑進(jìn)行了配置。下面是一個(gè)解決方案的小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 "上傳失敗，因?yàn)槲募强盏?";
 }
 }
}

個(gè)人中心：

<!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);
 }
}

對應(yīng)的用戶實(shí)體類:

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;
 }
}

用戶實(shí)體類的接口：

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>{
}

最后運(yùn)行如下：

注冊上傳頭像：

spring boot實(shí)現(xiàn)上傳圖片并在頁面上顯示及遇到的問題小結(jié) 

個(gè)人中心：

spring boot實(shí)現(xiàn)上傳圖片并在頁面上顯示及遇到的問題小結(jié)

ps：如果在結(jié)合spring security的話，只需要從session.SPRING_SECURITY_CONTEXT.authentication.principal.XXX中取得信息即可。

附上傳的這個(gè)小demo的地址：

http://xiazai.jb51.net/201712/yuanma/demo5(jb51.net).rar

總結(jié)

以上所述是小編給大家介紹的spring boot實(shí)現(xiàn)上傳圖片并在頁面上顯示及遇到的問題小結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手