包含来自 REST 的 BASE64 的大量数据 API

Question

所以我正在处理从数据库中提取数据的网页 (MYSQL)

图像 URL 字段包含存储在服务器上的文件（JPG、PNG、PDF 等）的位置。

我正在尝试将 Base 64 数据作为模型发送回前端(angular)

cmPost.Model

    private id;
    private postType;
    private title;
    private description;
    private String category;
    private String location;
    private String eventStart;
    private String eventEnd;
    private String imageUrl;
    private String department;
    private Integer semester;
    private String options;
    private String settings;
    private String college;
    private Integer anonyomus;
    private Integer status;
    private String timestamp;
    private String uploadBy;

uploadHelper.java

 public List<cmPost> getUploadList(String email) throws IOException {
        List<cmPost> editBeforeSend = postRepo.getUploads(email);

        for (var i = 0; i < editBeforeSend.size(); i++) {
            System.out.println(editBeforeSend.get(i).getPostType());
            if(editBeforeSend.get(i).getPostType().toString().equalsIgnoreCase("NA")) {
                String path = "uploads/events/" + editBeforeSend.get(i).getImageUrl();
                String ext = FilenameUtils.getExtension(path);
                String encoded = Base64.getEncoder().encodeToString(Files.readAllBytes(Path.of(path)));
                editBeforeSend.get(i).setImageUrl("data:image/"+ext+";base64,"+encoded);
            }else if(editBeforeSend.get(i).getPostType().toString().equalsIgnoreCase("Papers") || editBeforeSend.get(i).getPostType().toString().equalsIgnoreCase("Projects")){
                String path = "uploads/notes/" + editBeforeSend.get(i).getImageUrl();
                String ext = FilenameUtils.getExtension(path);
                String encoded = Base64.getEncoder().encodeToString(Files.readAllBytes(Path.of(path)));
                editBeforeSend.get(i).setImageUrl("data:image/"+ext+";base64,"+encoded);
            }
        }
        return editBeforeSend;
    }

uploadcontroller.java

@GetMapping("api/v1/upload/getPostList")
    public ResponseEntity<?> getPollsList(@RequestParam String email) throws IOException {
        List<cmPost> pollData = uploadHelper.getUploadList(email);
        return new ResponseEntity<>(pollData, HttpStatus.OK);
    }

但我得到 431 header 大错误，在邮递员上正常工作但在前端不正常 angular，任何人都可以指出一个更好的和有效的方法 this.Becasue 我将有很多图像文件需要在页面加载时发送到前端。

我的代码中犯了一些错误，现在可以正常工作了

我现在的问题是这是最好的方法吗？？

场景：如果我的数据库中有 1000 个带有图像路径的列，每个图像将被转换为 BASE64 并发送，那么最好和最有效的方法是什么

任何指导都会非常有帮助

提前致谢。

Answer 1

我不是 Angular 方面的专家，但您可以像这样修改 API：

发送至 Angular http URL 至您的 API，例如：http://localhost/api/images/ID/POST_TYPE
有一个 API 返回图像（例如：@GetMapping("/api/images/{id}/{postType}")），这将执行数据库查询。图像将作为二进制内容（不是 base64）返回。（见下文）

您也可以发送缓存信息，让浏览器不再下载该图片。

对于图像 API，我没有看到您是直接从文件系统使用图像。您可以简单地将 /app/images 之后的部分映射到它们存储的路径。

发送到 Angular URI：/api/images/uploads/events/WHATEVER
阅读/api/images
使用此 URI 获取实际文件
使用 Files.copy(yourPath, request.getOutputStream()) 执行实际复制。

注意：出于各种安全原因

您还应该检查 - 特别是如果您使用外部路径 - 路径是否有效地位于您想要的位置。
您还应该检查 - 鉴于图像是个人数据 - 用户确实可以访问它。这是 GRPD 给定的。

包含来自 REST 的 BASE64 的大量数据 API

Large set of data conatining BASE64 from REST API

java

rest

spring-boot

angular