13. JSON 방식으로 이미지 보내기

팀 프로젝트를 하던 도중

 

JSON 방식으로 파일을 업로드해야 할 일이 생겨서

 

자료를 찾아보고 포스팅하게 되었다

 

[참고 블로그]

 

https://eastflag.co.kr/fullstack/rest-with-spring/spring-rest_image/

angular, react, vue 등의 최신프런트엔드로 풀스택 개발

 

 

 

---

 

테스트 준비

 

springboot : spring web, jpa, mysql

 

 

 

1. Controller

 

[ 업 로 드 ]

@PostMapping("/upload")
public Integer handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {

    ImageVO imageVO = new ImageVO();
    imageVO.setMimetype(file.getContentType());
    imageVO.setOriginal_name(file.getOriginalFilename());
    imageVO.setData(file.getBytes());
    imageRepostiory.save(imageVO);

    return imageVO.getId();
}

주목해야할 점이 4가지 있다

 

---

1. @RequestParam("file")

2. MultipartFile file

3. imageVO에 넣어주는 값들

4. jpa를 사용한 데이터 저장

---

1. @RequestParam

 

간단하게 프론트 쪽에서 서버로 넘어올 데이터의 이름이 param이라는 데이터를 찾아서

뒤의 데이터에 저장한다

 

 

2. MultipartFile file

 

앞의 @RequestParam에서 넘어온 데이터를 MultipartFile이라는 객체 타입으로 저장하게 되는데

이미지 파일을 관리할 때는 MultipartFile을 사용하게 된다

 

 

3. imageVO에 넣어주는 값들

 

해당 데이터로 데이터를 저장되는 값을 보도록 하자

 

DB에 저장된 값들

 

id : 말그대로 식별키 / id는 multipartFile과는 관련 없이 자동으로 늘어나는 기본키 Value

mimetype : 이미지 파일의 확장자를 저장

data : BLOB를 저장(이미지 파일을 저장한다)

* BLOB 라는 것은 멀티미디어 (비디오, 사진 등) 을 저장할 대 사용하는 데이터 타입이라고 한다

original_name : 파일명을 저장

created : 생성일을 추가해주면 될 것 같다

 

 

4. jpa를 통해서 데이터 저장

 

위의 데이터를 JPA save 메소드를 통해서 DB에 저장하면 업로드는 끝이다

 

 

---

 

[ 내 려 받 기 ] 

 

@GetMapping("/view/{id}")
public ResponseEntity<byte[]> findOne(@PathVariable int id) {
    ImageVO imageVO = imageRepostiory.findById(id).orElse(null);

    HttpHeaders headers = new HttpHeaders();
    headers.add("Content-Type", imageVO.getMimetype());
    headers.add("Content-Length", String.valueOf(imageVO.getData().length));

    return new ResponseEntity<byte[]>(imageVO.getData(), headers, HttpStatus.OK);
}

 

 

해당 url을 통해서 데이터를 넘겨 받게 되고

 

해당 데이터를 header에 저장 할 것이다

 

해당 메소드에서 주목할 점은

 

1. id를 불러와서 jpa를 통해서 데이터를 조회

2. header에 데이터 저장

 

정도 이다

 

url 자체에 id 값을 불러와서 데이터를 조회해서 VO에 저장시키고

 

해당 데이터 중 필요한 정보를 header를 통해서 프론트 단으로 전송시키면 끝이다

 

[ 파일 불러오기 성공 시 body 와 headers ]

 

 

 

2. Entity

 

package com.test2.file2.entity;

import lombok.Data;

import javax.persistence.*;

@Data
@Entity
@Table(name = "image")
public class ImageVO {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private String mimetype;
    private String original_name;
    private byte[] data;
    private String created;
}

 

3. Jpa

 

@Repository
public interface ImageRepostiory extends JpaRepository<ImageVO, Integer> {


}

 

 

---

 

현재까지 사진 파일을 제대로 전송이 되지만

 

문제가 있다 여러가지 파일이 저장이 안된다

 

해당 문제를 해결해야할 필요성이 있다