Spring Boot实现文件上传功能

深碍√TFBOYSˉ_ 2024-04-21 08:03 17阅读 0赞

> #### ✨Spring Boot实现文件上传功能 ####
> 
>  *  前端处理
>  *  后端处理
>  *  物理路径和虚拟路径映射
> 
>   
> 📃个人主页: [不断前进的皮卡丘][Link 1]  
> 🌞博客描述: **梦想也许遥不可及，但重要的是追梦的过程，用博客记录自己的成长，记录自己一步一步向上攀登的印记**  
> **🔥网站推荐：千里之行，始于足下。每天坚持刷题，巩固所学知识，也为将来找工作，面试做好准备**\----- [刷题神器][Link 2]  
> **各大互联网大厂面试真题。基础题库到进阶题库等各类面试题应有尽有！  
> 牛客网面经合集,满足大厂面试技术深度，快速构建Java核心知识体系大厂面试官亲授，备战面试与技能提升，主要考点+主流场景+内功提升+真题解析**

## 前端处理 ##

*  通过form表单来上传文件
 *  提交方式为post
 *  enctype格式为"multipart/form-data"
 *  input类型为file
 *  name属性必须和Controller中方法的形参名称一致

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h2>用户注册</h2>
        <form action="/register" method="post" enctype="multipart/form-data">
            用户名:<input type="text" name="username"><br><br>
            密码  :<input type="password" name="password"><br><br>
            头像  :<input type="file" name="uploadFile"><br><br>
            <input type="submit" value="提交">
        </form>
    </body>
    </html>

## 后端处理 ##

创建一个数据库用来保存登录的用户名，密码，文件名  
![在这里插入图片描述][e86b3962eee847cbbc7662921b9003c8.png]

我们可以写一个工具类

public class UUIDUtils {
        
        public static String createNewUUID(){
        
            String uuid = UUID.randomUUID().toString();
            //如果要把uuid的-去掉替换成空字符串 然后需要把32为字符串变成64字符串
            uuid = uuid.replace("-", "");
            return uuid+uuid;
        }
    }

实体类User

@Data
    public class User {
        
        private Integer id;
        private String username;
        private String password;
        private String filename;
    }

Controller

@Controller
    public class UserController {
        
        @Autowired
        private UserService userService;
    
        /**
         * 显示注册画面
         * @return
         */
        @RequestMapping("/show")
        public String show(){
        
            return "/page/register.html";
        }
        @PostMapping("/register")
        public String register(User user, @RequestParam("uploadFile") MultipartFile uploadFile){
        
            System.out.println("用户:"+user);
            System.out.println("文件:"+uploadFile);
            //创建本地文件
            //思考文件名，文件名要是唯一的 必须要保证每一个用户注册上传的图片，文件等，必须保存成唯一的文件名
            //Java技术 Java UUID User Unique ID 本身用于给用户指定唯一的ID，可以用它来产生唯一的随机字符串
            //uuid默认返回的是32位字母组成的随机字符串，重复的概率几乎为0
            //创建唯一文件名
            String fileName= UUIDUtils.createNewUUID();
            //我们需要文件的后缀也应该不是写死的，前端上传的后缀是啥，我们保存的就是什么
            //获取原生文件的文件名
            String originalFilename = uploadFile.getOriginalFilename();
            System.out.println(originalFilename);
            //创建文件的后缀名
            String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
            //创建新的文件路径
            String filePath=fileName+suffix;
    
            File srcFile = new File("D:/springboot/download/img/"+filePath);
            try {
        
                //把前端传送的文件保存在本地中
                uploadFile.transferTo(srcFile);
            } catch (IOException e) {
        
                e.printStackTrace();
            }
            user.setFilename(filePath);
            try {
        
                userService.register(user);
            } catch (Exception e) {
        
                e.printStackTrace();
            }
            return "";
        }
    
    
    }

Service

public interface UserService {
        
        void register(User user) throws Exception;
    }

Service实现类

@Service
    public class UserServiceImpl implements UserService {
        
        @Autowired
        private UserMapper userMapper;
        @Override
        public void register(User user) throws Exception {
        
            userMapper.insert(user);
        }
    }

Mapper

@Mapper
    public interface UserMapper {
        
        @Insert("insert into user values(default,#{username},#{password},#{filename})")
        void insert(User user);
    }

![在这里插入图片描述][60dfd2652f624b5f8b9d00e3ad17cd5e.png]  
  
![在这里插入图片描述][1808ceeecca94e21b88f98d0c2235584.png]  
  
![在这里插入图片描述][405fe9c26c154caea54bf548d1760ed2.png]

## 物理路径和虚拟路径映射 ##

先准备好页面jsp

<%@page language="java" isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
      <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Title</title>
          </head>
          <body>
            <h2>文件的上传</h2>
            <form action="/file/upload" method="post" enctype="multipart/form-data">
              文件上传:<input type="file" name="uploadFile"><br><br>
              <input type="submit" value="提交">
            </form>
          </body>
    </html>

编写Controller

@Controller
    @RequestMapping("/file")
    public class FileUploadController {
        
        /**
        * 显示画面
        * @return
        */
        @RequestMapping("/show")
        public String show(){
        
            return "file.jsp";
        }
        
        @RequestMapping(value = "/upload",method = RequestMethod.POST)
        public String fileUpload(MultipartFile uploadFile, HttpSession session){
        
            //利用uuid创建唯一的字符串 让这个字符串作为文件名
            String fileName = UUIDUtils.createNewUUID();
            
            //获取上传文件的文件名
            String originalFilename = uploadFile.getOriginalFilename();
            //获取后缀名
            String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
            //创建文件保存路径
            String filePath=fileName+suffix;
            File srcFile=new File("D:/springboot/download/img/"+filePath);
            //把前端文件保存在本地
            try {
        
                uploadFile.transferTo(srcFile);
                //把文件存放在本地的文件路径保存在session域中
                session.setAttribute("filePath", filePath);
                
            } catch (IOException e) {
        
                e.printStackTrace();
            }
            //我们希望网页上可以把图片显示出来
            System.out.println("文件存放路径:"+filePath);
            return "show.jsp";
        }
        
    }

![在这里插入图片描述][201ac4c82b8a4657b88f10e059e96600.png]  
  
不过，我们可以发现，当我们点击提交的时候，图片还是无法显示  
  
![在这里插入图片描述][415ffb52c1584051857f2dddf2fbb619.png]

![在这里插入图片描述][feb09e3933c64a3f80302c8cb35e4551.png]  
![在这里插入图片描述][002f614c480a4ae4afa2e46b785274c1.png]

@Configuration
    public class WebConfig implements WebMvcConfigurer {
        
        //实现资源的虚拟路径和物理路径的映射
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
        
             registry.addResourceHandler("/img/**")
                     .addResourceLocations("file:"+"D:\\springboot\\download\\img\\");
        }
    }

addResourceHandler(“xxx”) 用于指定对外暴露的访问路径，addResourceLocations(“xxx”) 用于指定文件放置路径  
  
![在这里插入图片描述][e91fcacbf33c4831bd7dc9bae0215a40.png]

[Link 1]: https://blog.csdn.net/qq_52797170?spm=1010.2135.3001.5343
[Link 2]: https://www.nowcoder.com/link/pc_csdncpt_pkq_sf
[e86b3962eee847cbbc7662921b9003c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/bd80d5a9bd9441ab9b04e8fb9983279a.png
[60dfd2652f624b5f8b9d00e3ad17cd5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/dd1c54600abc4edeb6718e76a8c2a944.png
[1808ceeecca94e21b88f98d0c2235584.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/1009832a78de4138be5414afea6b89e0.png
[405fe9c26c154caea54bf548d1760ed2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/d2d7ef492c94441f8a2f48f2c91d81eb.png
[201ac4c82b8a4657b88f10e059e96600.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/844d50f35b6c44b2952d4c18122a7149.png
[415ffb52c1584051857f2dddf2fbb619.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/76ab62e1e43b4d108542e63921f39c61.png
[feb09e3933c64a3f80302c8cb35e4551.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/3a3091326ae3483d861075828522b053.png
[002f614c480a4ae4afa2e46b785274c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/a3220ab4a9e74ed187bcc1be9adfbdbc.png
[e91fcacbf33c4831bd7dc9bae0215a40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/09d7299fe56d4059a12bd35159b79f2e.png