如何使用 Angular 4 和 Spring 将图像存储在数据库中

Question

我在前端使用 Angular 4，在后端使用 Spring，我想在我的数据库中存储一个包含图像的用户。 据我所知 Blob 类型存在于 Angular 4 但它不存在于 Spring 中，并且类型 byte 存在于 Spring 但在 Angular 4 中没有。 如何使用 REST API 将图像从前端传输到后端。

这是我的实体：

import java.sql.Blob;
@Entity
@Table(name = "USER_OAUTH", schema = "OAUTH")
public class UserOauth implements java.io.Serializable {
 private long idUser;
 private String username;
 private String firstName;
 private String lastName;
 private String adrEmail;
 private int isAdAccount;
 private Date lastConnection;
 private String password;
 private boolean enabled;
 private int attempts;
 private Blob photo;

@Lob
@Column(name = "PHOTO", length = 10000000)
public Blob getPhoto() {
    return photo;
}

这是我的 DTO：

public class UserDTO implements java.io.Serializable {

 private long idUser;
 private String username;
 private String firstName;
 private String lastName;
 private String adrEmail;
 private int isAdAccount;
 private Date lastConnection;
 private String password;
 private boolean enabled;
 private Blob photo;

这是我的网络服务：（在添加照片之前它可以正常工作）：

// Add a new user;
@RequestMapping(value = "/users", method = RequestMethod.POST)
public UserDTO addUser(@RequestBody final UserDTO user) throws Exception {
    return modelMapper.map(userService.saveUser(modelMapper.map(user, UserOauth.class)), UserDTO.class);
}

最后是我的打字稿：

export class UserData {
  public  idUser: number;
  public  username: string;
  public  firstName: string;
  public  lastName: string;
  public  adrEmail: string;
  public  isAdAccount: boolean;
  public  lastConnection: Date;
  public  password: string;
  public  enabled: boolean;
  public  photo:Blob;
}

如果有任何更正，请告诉我。 提前谢谢你

Answer 1

如果您真的认为将图像存储在数据库中是有意义的，那么您可以使用 LOB 数据类型：

// File content
@Lob
private Blob image;

在前端使用 FormData 通过 REST API 将文件传递给后端，请参阅示例here

附： 您可能希望将图像存储在文件系统中并将其路径保存在数据库中。请参阅why。

Answer 2

在 TypeScript/Angular 中，您可以如下声明您的字段：img: File;

Spring 中 RestController 中的 DTO 应该使用 private final byte[] img;，最后你的实体也应该使用

@Lob
@Column(name = "IMG", length = 10000000)
private byte[] img;

Answer 3

假设您使用的是 Spring Data，那么 Spring Content JPA 比直接使用 @Lob 并编写自己的 @Controller 来处理 multipart/form-data POST 要容易得多。

添加以下依赖项：

pom.xml

   <!-- Java API -->
   <dependency>
      <groupId>com.github.paulcwarren</groupId>
      <artifactId>spring-content-jpa-boot-starter</artifactId>
      <version>0.0.11</version>
   </dependency>
   <!-- REST API -->
   <dependency>
      <groupId>com.github.paulcwarren</groupId>
      <artifactId>spring-content-rest-boot-starter</artifactId>
      <version>0.0.11</version>
   </dependency>

将以下属性添加到您的 UserOauth 实体，以便可以将内容与之关联。

UserOAuth.java

@Entity
public class UserOAuth {

   ...existing fields...

   @ContentId
   private String contentId;

   @ContentLength
   private long contentLength = 0L;

   // if you have rest endpoints
   @MimeType
   private String mimeType;

   // no need for Blob

创建一个ContentStore（相当于 BLOB 的 JpaRepository）：

UsersOAuthContentStore.java

@StoreRestResource(path="usersPhoto")
public interface UsersPhotoContentStore extends ContentStore<UserOAuth, String> {
}

（我假设您具有数据库连接的先决条件 bean）。

当您运行应用程序时，Spring Content 将看到 UsersPhotoContentStore 接口和 spring-content-jpa 依赖项，并为您注入此接口的 JPA 实现。它还将看到spring-content-rest 依赖项并添加一个@Controller 实现，该实现也将GET、PUT、POST 和DELETE REST 请求转发到UsersPhotoContentStore。这使您不必编写任何一个。 REST 端点将在/usersPhotos 提供，所以...

curl -X POST -F "image=@/home/user1/Desktop/photo.jpg" /usersPhotos/{userOAuthId}

将上传 photo.jpg 并将其与您的实体相关联。并且：

curl /usersPhotos/{userOAuthId} 将再次获取它。

HTH