Recently, I encountered a problem in the process of building a website using spring boot: when registering, the user needs to upload a profile picture of his own. After successful registration, he jumped to the personal center and displayed user information in the personal center. I encountered a problem when displaying the profile picture: When uploading the profile picture, I stored the profile picture in the static folder under the project file, stored its address in the corresponding user in the database, and added a hot deployment in the idea, but after registering and jumping to the personal center, it still cannot display the profile picture. It is only possible when the project is launched next time I enter the personal center.
I was troubled by this problem for a long time, and finally solved it like this: I created a new webapp folder in the main directory and configured its path. The following is a small demo of the solution. It is relatively simple to do, please forgive me~~The core code is as follows:
Registration interface:
<!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>Name</label><input type="text" name="name"/> <label>Password</label><input type="password" name="password"/> <label>Upload the picture</label> <input type="file" name="file"/> <input type="submit" value="upload"/></form></body></html>The control is as follows:
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. */@Controllerpublic 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://flag cup//demo5//src//main//webapp//"+name+".jpg"));//Save the picture to the directory out.write(file.getBytes()); out.flush(); out.close(); String filename="f://flag cup//demo5//src//main//webapp//"+name+".jpg"; user.setTupian(filename); userRepository.save(user);//Increase user} catch (FileNotFoundException e) { e.printStackTrace(); return "Upload failed," + e.getMessage(); } catch (IOException e) { e.printStackTrace(); return "Upload failed," + e.getMessage(); } model.addAttribute(user); return "permanager"; } else { return "Upload failed because the file is empty."; } }}Personal Center:
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"/> <title>Title</title></head><body><p>Username:</p><p th:text="${user.username}"></p><p>Picture:</p><img th:src="@{${user.username}+'.jpg'}"/></body></html>Configuration of webapp path
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. */@Configurationpublic class MyWebAppConfigurer extends WebMvcConfigurerAdapter{ @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/src/main/webapp/**").addResourceLocations("classpath:/webapp/"); super.addResourceHandlers(registry); }}Corresponding user entity class:
package com.example.demo.domain;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.Id;/** * Created by 18274 on 2017/8/9. */@Entitypublic class User { @Id @GeneratedValue private Long id; private String username; private String password; private String tupian;//Image address 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; }}Interface to user entity class:
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>{}Finally run as follows:
Register to upload avatar:
Personal Center:
ps: If you are combining spring security, you only need to obtain information from session.SPRING_SECURITY_CONTEXT.authentication.principal.XXX.
Attach the address of this small demo uploaded:
http://xiazai.VeVB.COM/201712/yuanma/demo5(VeVB.COM).rar
Summarize
The above is the summary of the spring boot implementation uploading pictures and displaying them on the page and encountering problems. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!