Upload Image With Spring Boot and Thymeleaf

Người dịch: Nguyễn Thành Trung - Học viên lớp Java08
Email liên hệ: nguyenthanhtrung.nlk58@gmail.com
Bài viết gốc: https://www.baeldung.com/spring-boot-thymeleaf-image-upload

1. Tổng quát

Trong hướng dẫn nhanh này, chúng ta sẽ xem xét cách tải hình ảnh lên trong ứng dụng web Java bằng Spring Boot và Thymeleaf .

2. Dependencies

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

3. Spring Boot Controller

Bước đầu tiên, chúng ta tạo controller web Spring Boot để xử lý các yêu cầu của chúng ta:

@Controller public class UploadController {

    public static String UPLOAD_DIRECTORY = System.getProperty("user.dir") + "/uploads";

    @GetMapping("/uploadimage") public String displayUploadForm() {
        return "imageupload/index";
    }

    @PostMapping("/upload") public String uploadImage(Model model, @RequestParam("image") MultipartFile file) throws IOException {
        StringBuilder fileNames = new StringBuilder();
        Path fileNameAndPath = Paths.get(UPLOAD_DIRECTORY, file.getOriginalFilename());
        fileNames.append(file.getOriginalFilename());
        Files.write(fileNameAndPath, file.getBytes());
        model.addAttribute("msg", "Uploaded images: " + fileNames.toString());
        return "imageupload/index";
    }
}

Chúng ta đã xác định hai phương pháp để xử lý các yêu cầu HTTP GET. Phương thức displayUploadForm () xử lý yêu cầu GET và trả về tên của Thymeleaf template để hiển thị cho người dùng để cho phép anh ta nhập một hình ảnh.

Phương thức uploadImage () xử lý tải hình ảnh lên. Nó chấp nhận yêu cầu multipart/form-data POST khi tải lên hình ảnh và lưu hình ảnh trên hệ thống tệp cục bộ. MultipartFil interface là một cấu trúc dữ liệu đặc biệt mà Spring Boot cung cấp để đại diện cho một tệp được tải lên trong một multipart request.

Cuối cùng, chúng ta đã tạo một thư mục tải lên sẽ lưu trữ tất cả các hình ảnh đã tải lên. Chúng ta cũng đã thêm một thông báo, chứa tên của hình ảnh đã tải lên, để hiển thị sau khi người dùng gửi biểu mẫu.

4. Thymeleaf Template

Bước thứ hai là tạo một Thymeleaf template mà chúng ta đặt là index.html trong đường dẫn src / main / resources / templates . Template này hiển thị một biểu mẫu HTML để cho phép người dùng chọn và tải một hình ảnh lên. Hơn nữa, chúng ta sử dụng thuộc tính accept = ”image / *” để cho phép người dùng chỉ nhập hình ảnh thay vì nhập bất kỳ loại tệp nào.

Hãy xem cấu trúc của tệp index.html :

<body>
<section class="my-5">
    <div class="container">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <h2>Upload Image Example</h2>
                <p th:text="${message}" th:if="${message ne null}" class="alert alert-primary"></p>
                <form method="post" th:action="@{/upload}" enctype="multipart/form-data">
                    <div class="form-group">
                        <input type="file" name="image" accept="image/*" class="form-control-file">
                    </div>
                    <button type="submit" class="btn btn-primary">Upload image</button>
                </form>
                <span th:if="${msg != null}" th:text="${msg}"></span>
            </div>
        </div>
    </div>
</section>
</body>

5. Tùy chỉnh kích thước tệp

Nếu chúng ta cố gắng tải lên một tệp lớn, một ngoại lệ MaxUploadSizeExceededException sẽ được ném ra. Tuy nhiên, chúng ta có thể điều chỉnh giới hạn tệp tải lên thông qua các thuộc tính spring.servlet.multipart.max-file-size và spring.servlet.multipart.max-request-size mà chúng ta xác định trong tệp application.properties :

spring.servlet.multipart.max-file-size = 5MB
spring.servlet.multipart.max-request-size = 5MB

6 . Kết luận

Trong bài viết nhanh này, chúng ta đã trình bày cách tải lên hình ảnh trong ứng dụng web Java bằng Spring Boot và Thymeleaf.