上传头像并回显(SpringBoot)

本文介绍了一种避免因系统环境切换导致头像路径问题的方法。使用SpringBoot结合ResourceUtils工具类,将头像文件名存储在数据库中,从而在前端通过相对路径动态加载,解决了Windows到Linux服务器部署时路径调整的问题。
摘要由CSDN通过智能技术生成

以前经常写上传头像功能,上传头像完回显出来,通常套路是:

数据库保存文件名(自己加工过,防止重名)

然后文件路径写到前台的绝对路径。前台直接用../相对路径的方式显示出来。

但是这样有一个问题就是当我们在window开发以后部署到linux服务器上的时候,需要改我们保存头像的绝对路径。

 

后边受到点启发,想了另一个套路:

 //文件路径
    private static final String PATH = ResourceUtils.CLASSPATH_URL_PREFIX+"static\\images";
    String filepath;
    {
        try {
            filepath = ResourceUtils.getFile(PATH).getAbsolutePath();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
    }

通过ResourceUtils这个工具类获取文件的绝对路径,然后还是数据库保存文件名。

前台js:

function change(temp) {
    //获取头像
    var formData = new FormData($("#head")[0]);
    var file = $("#headimg").get(0).files[0];
    formData.append("file", file);
    $.ajax({
        url: '/information/info/uploadhead',
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值