springboot进行图片上传并访问资源

悠悠 2022-09-06 14:24 193阅读 0赞

1.前后端不分离：  
springboot项目中static目录下新建upload.html（导入thymeleaf依赖）  
![在这里插入图片描述][1ed241b2e0a34d029c468d5f6dacfa6e.png]  
可以对上传的文件进行配置：

#设置单个文件上传大小
    spring.servlet.multipart.max-file-size=10MB
    # 设置总上传文件大小
    spring.servlet.multipart.max-request-size=100MB

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>

html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="uploadFile" value="选择文件">
        <input type="submit" value="上传">
    </form>
    </body>
    </html>

controller:

@PostMapping("/upload")
        public String upload(MultipartFile uploadFile,HttpServletRequest req)
        { 
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd/");
            String realPath = req.getSession().getServletContext().getRealPath("/uploadFile/");
            String format = sdf.format(new Date());
            File folder = new File(realPath + format);
            if(!folder.isDirectory())
                folder.mkdirs();
            String  oldName = uploadFile.getOriginalFilename();
            String newName = "nice"  + oldName.substring(oldName.lastIndexOf("."),oldName.length());
            try{ 
                uploadFile.transferTo(new File(folder,newName));
            String filePath =
                    req.getScheme() + "://" + req.getServerName() +":"+req.getServerPort()+
                    "/uploadFile/" + format+newName;
            return filePath;
            }
            catch (IOException e)
            { 
                e.printStackTrace();
            }
    return "上传失败";
    
        }

然后输入地址：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70]  
选择图片点击上传后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 1]  
然后浏览器输入：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 2]  
同时可以在html中用img标签访问，输入上面的url也可以访问到

[1ed241b2e0a34d029c468d5f6dacfa6e.png]: /images/20220829/036284ae831244cea48f9c1d5da91b02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70]: /images/20220829/73bf70db86df438795bcd5699a852f17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 1]: /images/20220829/98772b8d29b04583a0f5b6f857916584.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 2]: /images/20220829/e4c6804c21c746329106311710f86d4c.png