Как сохранить изображение в базе данных с помощью Angular 4 и Spring

Question

Я использую Angular 4 для Front-end и Spring для Back-end, и я хочу сохранить пользователя, который содержит изображение в моей базе данных.Как я знаю, тип 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);
}

И, наконец, мой Typescript:

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;

В Front-end используйте FormData для передачифайл для Back-end с использованием REST API, см. пример здесь

PS Возможно, вы захотите сохранить изображение в файловой системе и сохранить его путь в базе данных.Пожалуйста, смотрите почему .

Answer 2

Если вы используете Spring Data, тогда Spring Content JPA намного проще, чем напрямую использовать @Lob и писать собственный @Controller для обработки POST-данных multipart / form-data.

Добавьте следующие зависимости:

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, чтобы контент мог быть связан сit.

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 (эквивалент JpaRepository для больших двоичных объектов):

UsersOAuthContentStore.java

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

(я предполагаю, что у вас есть необходимые компоненты для подключения к базе данных).

При запуске приложения 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

Answer 3

В TypeScript / Angular вы можете объявить свое поле следующим образом: img: File;

Ваш DTO в RestController в Spring должен использовать private final byte[] img; и, наконец, ваша сущность также

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