Kind tips
In the Spring Boot member management system, it is necessary to involve the Spring framework, SpringMVC framework, Hibernate framework, and thymeleaf template engine. Therefore, you can learn this knowledge. Of course, it is okay to use it directly if you get started, but it may be a bit difficult if you involve some exceptions and principles.
1. Front-end part
In the front-end part addMember.html submits member information through the form form form, which includes the image upload function (the file upload operation is involved). The code in the form part is as follows:
<form th:action="@{/admin/addMember}" method="post" enctype="multipart/form-data" id="addMember"> <div> <div> <span>Select avatar file</span> <input id="file" type="file" name="iconPath" multiple="" placeholder="select file" accept="image/*" onchange="changeToop()"> </div> <div> <!--<input type="text" placeholder="Upload one or more files">--> <img id="myimg" src="assets/iconPath/common.jpg" /> </div> <!--Avatar file upload preview--> <script> function Id(id){ return document.getElementById(id); } function changeToop(){ var file = Id("file"); if(file.value===''){ //Set the default image Id("myimg").src='assets/iconPath/common.jpg'; }else{ preImg("file","myimg"); } } //Get the url of the input[file] image Important function getFileUrl(fileId) { var url; var file = Id(fileId); var agent = navigator.userAgent; if (agent.indexOf("MSIE")>=1) { url = file.value; } else if(agent.indexOf("Firefox")>0) { url = window.URL.createObjectURL(file.files.item(0)); } else if(agent.indexOf("Chrome")>0) { url = window.URL.createObjectURL(file.files.item(0)); } return url; } //Preview function after reading the picture preImg(fileId,imgId) { var imgPre =Id(imgId); imgPre.src = getFileUrl(fileId); } </script> </div> ......... </form> There is a note here: because it involves file upload, enctype="multipart/form-data" needs to be added to form, and the name attribute in input corresponds to the incoming parameter name of the Controller mapping method in the backend.
2. Backend code implementation
In the backend, the SpringMVC framework can process files and then we can receive the files by passing in parameters.
2.1 Controller handles incoming files
The code is as follows:
@PostMapping("/addMember") public String addMember(Member member, String gradeName, MultipartFile icon, Map<String, Object> model) { //Processing uploaded file try { if (icon == null)//First determine whether the uploaded file is null return "error"; if (icon.getOriginalFilename().equals("")) //If the original name of the uploaded file is an empty string, it is proved that the default image member.setIconPath("/assets/icon/common.jpg"); //Set as our default image pathelse // Here I process the uploaded MultipartFile by passing the file upload tool class I wrote. The file name is set to the string member.setIconPath(FileUploadUtil.upload(icon, "/assets/icon/", UUIDRandomUtil.get32UUID())); } catch (Exception e) { e.printStackTrace(); return "error"; } ..... return "addMemberSuccess"; }2.2 FileUploadUtil tool class saves files
After the Controller's MultipartFile file is passed in, it needs to be further converted into FIle and saved to disk, so I processed it separately and handed over the Controller's incoming file to the FileUploadUtil tool class for processing. The specific code is as follows:
public class FileUploadUtil { /** * Upload file* @param multipartFile multipartFile * @param prefixPath Prefixpath, relative to the path in the entire project, there is no need to add "/" at the beginning of the path * @param fileName Uploaded filename* @return The final relative path after upload + filename* @throws Exception It is possible to have null pointer exceptions and IO exceptions*/ public static String upload(MultipartFile multipartFile, String prefixPath, String fileName) throws Exception { //Get the absolute path uploaded String uploadPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() +"/static"+ prefixPath; File file = new File(uploadPath); if (!file.exists()) if (file.mkdirs()) System.out.println("Successfully created directory"); //Get the uploaded suffixName = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf(".")); // Create a finalized file file = new File(uploadPath+fileName+suffixName); multipartFile.transferTo(file); return prefixPath+fileName+suffixName; }} ClassUtils in the above is a tool class provided by Spring, and calling the method getDefaultClassLoader().getResource("").getPath() is to get the path under the current project classpath.
The above is part of the content about file upload in this system. The source code of this system is uploaded to GitHub and downloaded source code.
Summarize
The above is the file upload function of the Spring Boot member management system introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!