记录解决springboot项目上传图片到本地,在html里不能回显的问题

项目场景:

项目场景:在我的博客系统里:有个相册模块:需要把图片上传到项目里,在html页面上显示
在这里插入图片描述
在这里插入图片描述


解决方案

1.建一个文件夹

例如在windows系统下。可以在项目根目录下建个photos文件夹,把上传的图片文件保存到这个文件夹里
在这里插入图片描述

2.实现WebMvcConfigurer

重写addResourceHandlers方法

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {

    @Value("${uploadLinuxTempFilePath}")
    private String linuxUploadPath;



    /**
     * 解决上传图片后不能立即访问到(回显)的问题
     * */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // http://localhost//upload_img/photos/1720864412594.png
        // 访问上传到本地的图片
        String path;
        String os = System.getProperty("os.name");
        if(os.startsWith("Windows")){
            path = System.getProperty("user.dir")+"/photos/";
        }else {
            path = linuxUploadPath;
        }
        // 例如访问http://111.229.128.4:80//upload_img/1720877954983.jpg
        // 只要匹配到/upload_img/路径,springmvc会自动映射到你建的 path  路径下
        registry.addResourceHandler("/upload_img/**")
                .addResourceLocations("file:"+path);
    }

3.保存到表里的文件路径

我这个是保存到linux上,所以ip是我的服务器ip
在这里插入图片描述
如果是上传到你的windows电脑上, ip就是127.0.0.1

4.附上传图片的代码

package com.lizhenqiang.myblog.util;

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;

@Service
@Slf4j
public class UploadFileUtil {
    @Value("${uploadLinuxTempFilePath}")
    private String linuxUploadPath;


    @Value("${server.port}")
    private int port;

    @Value("${linuxIP}")
    private String linuxIp;

    public String uploadFileToLocal(MultipartFile file) {
        // [1] 获取项目目录
        // http://localhost//upload_img/1720864412594.png
        log.info("[开始] 拼接保存到本地的完整文件路径");
        String userDir = System.getProperty("user.dir");

        // [2] 在项目目录下新建一个文件夹
        String targetDir = "/photos/";

        // [3] 获取文件后缀
        String originalFilename = file.getOriginalFilename();
        String[] split = originalFilename.split("\\.");
        String suffix = split[1];

        // [4] 组装完整文件路径
        String fileName =  System.currentTimeMillis()+ "." +suffix;
        String filePath;

        String prefixIp;
        String os = System.getProperty("os.name");

        if(os.startsWith("Windows")){
            filePath = userDir + targetDir + fileName;
            prefixIp = "http://127.0.0.1:"+port+"//upload_img/";
        }else {
            filePath = linuxUploadPath + fileName ;
            prefixIp = "http://"+linuxIp+":"+port+"//upload_img/";
        }


        // [4.1] 判断路径是否存在, 如果不存在则创建
        this.createDirectoryIfNotExits(filePath);
        log.info("[结束] 拼接保存到本地的完整文件路径, 文件路径 [{}]", filePath);


        // [5] 获取输入流、创建输出流
        log.info("[开始] 复制文件到本地, 文件路径 [{}]", filePath);
        try (InputStream inputStream = file.getInputStream();
             FileOutputStream outputStream = new FileOutputStream(filePath)) {
            // [6] 从输入流读, 往输出流写
            int readBytes;
            byte[] bytes = new byte[1024];
            while ((readBytes = inputStream.read(bytes)) != -1) {
                outputStream.write(bytes, 0, readBytes);
            }

            // [7] 刷新输出流
            outputStream.flush();
            log.info("[结束] 复制文件到本地, 文件路径 [{}]", filePath);

            // [8] 返回文件完整路径
            return prefixIp+ fileName;


        } catch (IOException e) {
            log.info("[失败] 复制文件到本地, 文件路径 [{}], 异常信息 [{}]", filePath, e.getMessage());
            throw new RuntimeException("复制文件到本地失败");
        }
    }


    /**
     * 判断文件路径是否存在, 不存在则创建
     *
     * @param path 文件完整路径
     */
    public void createDirectoryIfNotExits(String path) {
        /*
         逻辑:
         1. 判断是否是文件夹, 如果是文件夹, 在判断文件夹是否存在, 不存在则创建
         2. 如果不是文件夹, 就获取它的目录, 不存在则创建
         */


        // [1] 判断是否是文件夹, 如果是文件夹, 在判断文件夹是否存在, 不存在则创建
        File file = new File(path);
        if (file.isDirectory()) {
            if (!file.exists()) {
                file.mkdirs();
            }
        } else {
            // [2] 如果不是文件夹, 就获取它的目录, 不存在则创建
            File parentFile = file.getParentFile();
            if (!parentFile.exists()) {
                parentFile.mkdirs();
            }
        }
    }

}

5.欢迎访问我的博客系统

基于Java(Springboot)可以用做毕业设计的个人博客系统,包括网站前台和后台管理系统两部分。网站前台包括首页、归档页面、相册页面、留言页面、关于我页面。支持用户注册与登录,注册时使用邮箱发送验证码。
后台管理系统包括写博客、管理博客。对分类、标签、相册、用户的增删改查。还有对访客的记录。

网站链接 前台: http://111.229.128.4/
后台: http://111.229.128.4/admin
用户名/密码:admin/admin
前端框架:Layui
后端:Springboot
数据库:MySQL,redis

欢迎访问!

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Spring Boot中,实现头像上传并回显的步骤如下: 1. 添加文件上传依赖 在`pom.xml`中添加以下依赖: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version> </dependency> ``` 2. 编写上传页面 在HTML页面中添加上传表单: ```html <form method="post" action="/upload" enctype="multipart/form-data"> <input type="file" name="file"/> <input type="submit" value="Upload"/> </form> ``` 3. 编写上传接口 在控制器中添加上传接口: ```java @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file, Model model) { String fileName = StringUtils.cleanPath(file.getOriginalFilename()); try { FileUploadUtil.saveFile(uploadDir, fileName, file); } catch (IOException e) { e.printStackTrace(); } model.addAttribute("message", "File uploaded successfully!"); model.addAttribute("fileName", fileName); return "upload-result"; } ``` 其中,`FileUploadUtil`是一个工具类,用于保存文件: ```java public class FileUploadUtil { public static void saveFile(String uploadDir, String fileName, MultipartFile multipartFile) throws IOException { Path uploadPath = Paths.get(uploadDir); if (!Files.exists(uploadPath)) { Files.createDirectories(uploadPath); } try (InputStream inputStream = multipartFile.getInputStream()) { Path filePath = uploadPath.resolve(fileName); Files.copy(inputStream, filePath, StandardCopyOption.REPLACE_EXISTING); } catch (IOException ioe) { throw new IOException("Could not save image file: " + fileName, ioe); } } } ``` 4. 显示上传结果 在上传成功后,跳转到上传结果页面,显示上传的文件名和头像: ```html <h1>Upload Result</h1> <p th:text="'File uploaded successfully: ' + ${fileName}"></p> <img th:src="@{${'/uploads/' + fileName}}" width="200" height="200"/> ``` 其中,`/uploads/`是上传文件保存的目录。需要在`application.properties`中添加以下配置: ```properties spring.servlet.multipart.enabled=true spring.servlet.multipart.file-size-threshold=2KB spring.servlet.multipart.max-file-size=200MB spring.servlet.multipart.max-request-size=215MB # Upload directory for files file.upload-dir=uploads ``` 在控制器中添加注入`uploadDir`的代码: ```java @Value("${file.upload-dir}") private String uploadDir; ``` 5. 运行应用程序 现在,启动Spring Boot应用程序并访问上传页面。选择要上传的文件并单击“上传”按钮。上传成功后,将显示上传结果页面,并显示上传的文件名和头像。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李小枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值