spring boot thymeleaf 图片上传web项目根目录操作步骤

下面是关于“spring boot thymeleaf 图片上传web项目根目录操作步骤”的完整攻略。

1.准备工作

首先，在项目的pom.xml中添加thymeleaf和spring-boot-starter-thymeleaf的依赖。然后再单独添加commons-fileupload的依赖以支持文件上传。

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

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

2.前端表单设计

接下来，我们需要在前端的html模板中添加图片上传表单，并在form标签中添加enctype属性以支持文件上传。示例如下：

<form method="post" enctype="multipart/form-data" th:action="@{/upload}" >
  <input type="file" name="file" />
  <input type="submit" value="Upload" />
</form>

3.上传文件处理

在后端的Controller中，我们需要添加一个RequestMapping标记的方法来处理文件上传的请求。在这个处理函数中，我们需要实例化一个CommonsMultipartFile对象来处理上传的文件。然后我们可以使用path属性指定上传到应用程序根目录中的位置。

实现方法如下：

@CrossOrigin("*")
@Controller
public class FileUploadController {

    @RequestMapping("/upload")
    public String upload(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws Exception {

        String fileName = file.getOriginalFilename();
        // 获取应用程序根目录
        String path = request.getServletContext().getRealPath("/");
        File dir = new File(path + "/upload");
        if (!dir.exists()) {
            dir.mkdir();
        }
        File fileSave = new File(dir.getAbsolutePath() + File.separator + fileName);
        file.transferTo(fileSave);

        return "upload_status"; // 返回上传成功视图
    }
}

需要注意的是，在上面代码中，我们通过调用HttpServletRequest的getServletContext()方法获取servlet上下文，然后使用getRealPath("/")方法获取应用程序的根目录路径，在该路径下创建upload目录用于存储上传的文件。

4.前端展示上传结果

最后，在html页面上，我们还需要添加一个标记来展示上传结果，可以在Controller的返回值中添加Model对象来传递结果。示例如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div th:if="${message != null}">
      <h3 th:text="${message}"></h3>
    </div>
  </body>
</html>

5.完整示例

下面提供一个完整的示例代码：

@CrossOrigin("*")
@Controller
public class FileUploadController {

    @RequestMapping("/upload")
    public String upload(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request, Model model) throws Exception {

        String fileName = file.getOriginalFilename();
        // 获取应用程序根目录
        String path = request.getServletContext().getRealPath("/");
        File dir = new File(path + "/upload");
        if (!dir.exists()) {
            dir.mkdir();
        }
        File fileSave = new File(dir.getAbsolutePath() + File.separator + fileName);
        file.transferTo(fileSave);

        model.addAttribute("message", "File uploaded successfully");

        return "upload_status";
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <form method="post" enctype="multipart/form-data" th:action="@{/upload}" >
      <input type="file" name="file" />
      <input type="submit" value="Upload" />
    </form>
    <div th:if="${message != null}">
      <h3 th:text="${message}"></h3>
    </div>
  </body>
</html>

其中，以上代码将上传的文件存储在应用程序的根目录中的/upload目录中。在上传成功后，会返回一个上传成功的视图upload_status.html并展示上传结果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：spring boot thymeleaf 图片上传web项目根目录操作步骤 - Python技术站