如何使用Spring Boot和Thymeleaf上传图像并将其名称存储在数据库中？

Question

我在应用程序中使用Spring Boot和Thymeleaf

单击提交按钮时，我想保存数据库（Postgresql）中所有字段的表单。 至于图像，我想将图像名称另存为字符串，以便在数据库中使用，以备将来使用，例如按其名称检索图像。

我有两种形式的输入：一种用于jpeg或jpg图像，一种用于gif图像。

问题是我从百里香得到错误：

DefaultHandlerExceptionResolver：已解决[org.springframework.web.multipart.support.MissingServletRequestPartException：所需的请求部分'imageFile'不存在]

如何正确将图像上传到文件夹并将其名称保存在数据库中？

HTML表单：

<form action="#" th:action="@{/admin/sketches/add}" th:object="${sketch}" method="post" id="save-sketch" enctype="multipart/form-data">
        <div class="add-sketch">
            <div class="title">
                <div class="title-text">
                    <p>Title
                        <span th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="error"></span>
                    </p>
                    <input type="text" class="title-input" th:field="*{title}" id="title">
                </div>
                <div class="title-file">
                    <label for="file-input">
                        <img th:src="@{/images/add image.png}" alt="upload image">
                    </label>
                    <input id="file-input" type="file" th:field="*{image}" name="imageFile" accept="image/x-png,image/gif,image/jpeg" />
                </div>
                <span id="image-text">No file chosen, yet</span>
            </div>

            <!--SKETCH TEXT====================================-->
            <div class="sketch-text">
                <p>Sketch Text
                    <span th:if="${#fields.hasErrors('text')}" th:errors="*{text}" class="error"></span>
                </p>
                <textarea name="sketch-area" id="" cols="55" rows="6" th:field="*{text}"></textarea>
            </div>

            <!--DROPDOWN-->
            <div class="select">
                <select name="select-category" id="select-category" th:field="*{category}">
                    <option value="Buttons">Buttons</option>
                    <option value="Potentiometers">Potentiometers</option>
                    <option value="Encoders">Encoders</option>
                    <option value="Leds">Leds</option>
                </select>
            </div>

            <span th:if="${#fields.hasErrors('category')}" th:errors="*{category}" class="error"></span>

            <!--ADD GIF=====================================-->
            <input type="file" id="gif-file" hidden="hidden" th:field="*{gif}" name="gif" accept="image/x-png,image/gif,image/jpeg" >
            <button type="button" id="gif-button">Add GIF<i class="fas fa-image"></i></button>
            <span id="gif-text">No file chosen, yet</span>

            <div class="save-sketch">
                <input type="submit" class="save-sketch-button" id="button-save" value="Save Sketch"/>
            </div>

        </div>
    </form>

在控制器中发布方法：

private final String UPLOAD_FOLDER = "src/main/resources/uploads/";

public AdminController(SketchRepository sketchRepository) {
    this.sketchRepository = sketchRepository;
}

@PostMapping("/sketches/add")
    public String addSketch(
                            @Valid Sketch sketch,
                            BindingResult result,
                            @RequestParam MultipartFile imageFile,
                            @RequestParam MultipartFile gifFile,
                            RedirectAttributes redirectAttributes) throws IOException {


        redirectAttributes.addFlashAttribute("action", "save");
        if (result.hasErrors()) {
            return "admin/add-sketch";
        }
        String imageExtension = "";
        String imageName = sketch.getImage();
        String gifName = sketch.getGif();

        //get imageExtension from chosen image
        int i = imageName.lastIndexOf('.');
        if (i > 0) {
            imageExtension = imageName.substring(i+1);
        }

        imageName = sketch.getTitle() + "." + imageExtension;
        gifName = sketch.getTitle() + ".gif";

        Path imageNameAndPath = Paths.get(UPLOAD_FOLDER, imageName);
        Path gifNameAndPath = Paths.get(UPLOAD_FOLDER, gifName);

        if (sketch.getGif() == null || sketch.getGif().isEmpty()) {
            sketch.setGif(null);
        } else {
            sketch.setGif(gifName);
        }

        sketch.setImage(imageName);
        sketchRepository.save(sketch);
        try {
            Files.write(imageNameAndPath, imageFile.getBytes());
            Files.write(gifNameAndPath, gifFile.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "redirect:/admin/sketches/add";
    }

Application.properties文件：

spring.servlet.multipart.enabled=true

# Max file size.
spring.servlet.multipart.max-file-size=200MB
# Max Request Size
spring.servlet.multipart.max-request-size=215MB