在springboot中，如何将我的客户图片存储在本地系统中，并将图片路径存储在数据库中？

Question

这是我的客户实体

@Entity
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Customer {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private String relative;
private String address;
private Long aadhar;
private Long contact;
private String townname;
private String imagePath;

这是我的 controller function 添加新客户，我不知道我这样做是否正确，我的意思是将图像路径存储在客户表中，将图像存储在 static 文件夹中的 custimages 文件夹中，此 savCustomer 从表单中保存其他字段输入名称和列名称相同

@PostMapping("/customer/addnew")
public String addNew(Customer customer, RedirectAttributes redirectAttributes,@RequestParam("image") MultipartFile snapshot) throws IOException {
       if (!snapshot.isEmpty()) {
            try {
                // Generate a random file name
                String fileName = UUID.randomUUID().toString() + ".jpg";
                // Create a File object to save the image
                File file = new File("src/main/resources/static/custimages/" + fileName);
                // Save the snapshot to the file
                snapshot.transferTo(file);
                // Set the imagePath field in the Customer entity
                customer.setImagePath(fileName);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

    customerService.saveCustomer(customer);
    redirectAttributes.addFlashAttribute("addcustomermessage", "added successfully");
    return "redirect:/customer";
}
    

这是我的 html 表格

    <form class="row g-3" th:action="@{/customer/addnew}"
                            method="post" enctype="multipart/form-data">
                            <div class="col-md-12">
                                <label for="image">Upload Image</label> <input type="file"
                                    id="image" name="image" accept="image/*">
                                <div class="row">
                                    <div class="col-md-5">
                                        <canvas id="snapshot" width="280" height="200"
                                            style="transform: scaleX(-1)"></canvas>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" id="capture" class="btn btn-info">Capture</button>
                                    </div>
                                    <div class="col-md-5">
                                        <video id="camera-stream" autoplay width="280" height="200"
                                            style="transform: scaleX(-1);"></video>

                                    </div>
                                </div>

                            </div>

                            <div class="col-md-4">
                                <label for="aadhar" class="form-label">ஆதார் எண்</label> <input
                                    type="number" min="0" max="999999999999" class="form-control"
                                    id="aadhar" name="aadhar" required>
                            </div>
                            <div class="col-md-8">
                                <label for="customername" class="form-label">பெயர்</label> <input
                                    type="text" class="form-control" id="name" name="name"
                                    onKeyup="this.value = this.value.toUpperCase()" required>
                            </div>
                            <div class="col-md-6">
                                <label for="relative" class="form-label">S/o,D/o,W/o,C/o</label>
                                <input type="text" class="form-control" id="relative"
                                    name="relative" onKeyup="this.value = this.value.toUpperCase()"
                                    required>
                            </div>
                            <div class="col-md-6">
                                <label for="contact" class="form-label">தொலைபேசி எண்</label> <input
                                    type="number" min="10" max="9999999999" class="form-control"
                                    id="contact" name="contact" required>
                            </div>
                            <div class="col-12">
                                <label for="inputAddress5" class="form-label">முகவரி</label> <input
                                    type="text" class="form-control" id="address" name="address"
                                    onKeyup="this.value = this.value.toUpperCase()"
                                    placeholder="1234 Main St" required>
                            </div>
                            <div class="col-md-4">
                                <label for="inputTown" class="form-label" id="selecttown">ஊர்</label>
                                <select class="form-control" id="selecttown" name="townname"
                                    required>
                                    <option selected></option>
                                    <option th:each="town:${towns}" th:value="${town.townname}"
                                        th:text="${town.townname}">...</option>
                                </select>
                            </div>


                            <script>
const constraints = {
        video: true
    };
    const cameraStream = document.getElementById('camera-stream');
    const snapshotCanvas = document.getElementById('snapshot');
    const context = snapshotCanvas.getContext('2d');
    const form = document.querySelector('form');

    navigator.mediaDevices.getUserMedia(constraints)
            .then((stream) => {
                cameraStream.srcObject = stream;
            });
    
        

        document.getElementById("capture").addEventListener("click", function() {
               var canvas = document.getElementById('snapshot');
        var video = document.getElementById('camera-stream');
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 280, 200);
        canvas.toBlob(function(blob) {
          var file = new File([blob], generateFileName(), { type: 'image/jpeg' });
          // Add the file to the form data
          var formData = new FormData();
          formData.append('image', file);
          
        }, 'image/jpeg', 1);
        function generateFileName() {
              var prefix = "customer_";
              var randomNumber = Math.floor(Math.random() * 1000000);
              var fileName = prefix + randomNumber + ".jpg";
              return fileName;
            }
    });
</script>

                            <div class="text-center" style="margin-bottom: 10px">
                                <button type="submit" class="btn btn-primary mx-1 my-1">Submit</button>
                                <button type="reset" class="btn btn-secondary mx-1 my-1">Reset</button>
                            </div>
                        </form>

此表单具有客户数据字段以及第一个字段在表单内流式传输视频，当我点击 caputre 按钮时，它拍摄了快照并将其作为缩略图发布在表单本身中，我有一个内联代码来执行这些操作功能，并将捕获的快照附加到 append 它到图像输入，一旦我点击提交我的 controller function 将保存图像和客户表的路径，但其他字段在表中正确更新，但图像没有上传到 custimages 文件夹以及图像路径也是 null。我只是在学习我在这里做错了什么或者我在这里使代码复杂化，而不是简单的方法。

Answer 1

这可能不是您正在寻找的确切答案。 但是在存储图像的选项/解决方案中，您可以将它们转换为 base64 图像（字符串格式）并将其作为字符串存储在数据库中。

不要担心在 html 代码中准备好图像，因为<img src ="${imgUrl}" >会理解 base64 格式并正确显示它。

我希望这能解锁你