image - 如何使用 Spring Data REST 将图像文件提供给前端?

标签 image file vue.js spring-data-jpa spring-data-rest

我正在尝试创建一个电影数据库网络应用程序。每部电影都应该有一张海报图片。我不知道如何使用 Spring Data REST 正确地将图像提供给前端。

Movie.java

import lombok.AccessLevel;
import lombok.Data;
import lombok.NoArgsConstructor;

import javax.persistence.*;
import java.io.File;
import java.sql.Date;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;

@Data
@Entity
@NoArgsConstructor(access = AccessLevel.PRIVATE)
public class Movie {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String title;
    private String director;
    private Date releaseDate;
    private File posterFile;

    @ManyToMany
    @JoinTable(
            name = "MOVIE_GENRES",
            joinColumns = @JoinColumn(name = "MOVIE_ID"),
            inverseJoinColumns = @JoinColumn(name = "GENRE_ID"))
    private Set<Genre> genres = new HashSet<>();

    @OneToMany
    @MapKeyColumn(name = "ACTOR_ROLE")
    private Map<String, Actor> cast = new HashMap<>();

    public Movie(String title) {
        this.title = title;
    }

    public void addActor(String role, Actor actor) {
        cast.put(role, actor);
    }

    public void removeActor(String role) {
        cast.remove(role);
    }

    public void addGenre(Genre genre) {
        genres.add(genre);
    }

    public void removeGenre(Genre genre) {
        genres.remove(genre);
    }
}

我无法在电影 bean 中使用字节数组,因为它太大而无法保存在数据库中。我可以存储 File 对象或 Path 对象或包含路径的字符串: private File posterFile; 问题是,它将保存像"C:\user\documents\project\backend\images\posterxyz.png"这样的本地路径。 。 当我尝试在前端使用此路径作为 img-src 时,会出现错误“不允许加载本地资源”。我的意思是,无论如何,这听起来都是一种愚蠢的做法。我只是不知道正确的方法是什么。

这是电影存储库。 我在后端使用 Spring Data REST,它生成超媒体应用程序语言格式的 JSON。

MovieRepository.java

import org.springframework.data.repository.PagingAndSortingRepository;
import org.springframework.data.rest.core.annotation.RepositoryRestResource;

@RepositoryRestResource(collectionResourceRel = "movies", path = "movies")
public interface MovieRepository extends PagingAndSortingRepository<Movie, Long> {

}

最佳答案

我愿意:

一个

通过向字段添加 @JsonIgnore 注释来防止 posterFile 属性被序列化。

@JsonIgnore
private File posterFile;

您还可以通过 Jackson 混合类来完成此操作,以避免 Json 处理指令“污染”您的实体,但您需要自己研究。

两个

向资源表示添加自定义链接,以允许客户端按需获取图像数据。例如/movies/21/poster

请参阅此处,了解有关如何向资源添加自定义链接的详细信息:

Spring Data Rest Custom Links on Resource

专门用于创建到 Spring MVC Controller 的链接:

https://docs.spring.io/spring-hateoas/docs/0.24.0.RELEASE/api/org/springframework/hateoas/mvc/ControllerLinkBuilder.html

https://stackoverflow.com/a/24791083/1356423

创建一个标准 Spring MVC Controller ,绑定(bind)到您的自定义链接所指向的路径,该 Controller 将读取文件数据并传输响应。

例如

@Controller
public MoviePosterController{

    @GetMapping(path="/movies/{movieId}/poster")
    //https://docs.spring.io/spring-data/jpa/docs/current/reference/html/#core.web for auto resolution of path var to domain Object
    public @ResponseBody byte[] getPoster(@PathVariable("movieId") Movie movie, HttpServletResponse response){
        File file = movie.getPosterFile();
        //stream the bytes of the file
        // see https://www.baeldung.com/spring-controller-return-image-file
        // see https://www.baeldung.com/spring-mvc-image-media-data
    }
}

关于image - 如何使用 Spring Data REST 将图像文件提供给前端?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56664782/

相关文章:

image - JavaFX 图像 : Check if image is valid

java.util.logging 检查文件是否存在于 java 中

javascript - 如何使用 Ant Design Vue 在 Select 中禁用特定元素?

javascript - 在 Vue.js Mounted() 中更新数据不起作用

WPF 最有效的图片加载方式

javascript - 标题基于不断变化的图像?

html - Internet Explorer 中图像的大小问题

perl - 如何从一个文件中检索一组两行,引用另一个文件中的第一行?

java - JBoss 日志目录中的 swo 和 swp 文件是什么?

javascript - Vuejs api 对多个变量的响应结果