[spring boot]이미지 업로드

 이미지 업로드 (Reactjs)

"Content-Type": "multipart/form-data"

 

<form onSubmit={handleClick}>
    <input
      type="file"
      multiple
      onChange={(e) => {
        setTempFile(e.target.files);
      }}
    />
    <button type="submit">submit</button>
</form>

input은 파일 타입으로, multiple으로 여러개의 파일 한번에 선택 가능, 

const [tempFile, setTempFile] = useState();

파일을 서버 url에 전달하기 위한 state 사용

const handleClick = (e) => {
	var data = new FormData();
    for (let i = 0; i < tempFile.length; i++) {
      data.append("files", tempFile[i]);
    }
    
    Axios.post("uploadUrl", data, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      console.log(res);
    });
    
}

 FormData는 key/value 쌍을 쉽게 생성 가능하며, content-type을 "multipart/form-data"로 설정하면, form에서와 동일한 포멧을 사용함.

 

 

이미지 저장

@PostMapping("/file")
    public boolean uploadFile(List<MultipartFile> files) throws IllegalStateException, IOException {
        String UPLOAD_PATH = "/home/ec2-user/src/" + new Date().getTime(); // 업로드 할 위치 // 현재 날짜 값 폴더
        
        try {
            for (int i = 0; i < files.size(); i++) {
            
                String originName = files.get(i).getOriginalFilename(); // 파일.type
                String[] tempStr = originNamesplit("."); 
				originName = tempStr[0];
                String type = tempStr[1];

                File newFile = new File(UPLOAD_PATH, originName + "." + type); // 경로/파일.type
                
                if (!fileSave.exists()) { // 폴더가 없을 경우 폴더 만들기
                    fileSave.mkdirs();
                }

                files.get(i).transferTo(newFile); 
                // transferTo(File file) > multipartFile을 주어진 file의 경로로 이동 (copy)
            }
         
        } catch (IOException e) {
            System.out.println(e);
            return false;
        }

        return true;
    }

이미지 저장 경로 UPLOAD_PATH 를 DB에 저장하여 사용

 

이미지 불러오기

@GetMapping(value = "file/{id}/{name}", 
produces = MediaType.IMAGE_JPEG_VALUE // content-type
)
    public ResponseEntity<byte[]> test(@PathVariable("id") Integer id @PathVariable("name") throws IOException {
        String DATA_DIRECTORY = id를 이용해서 폴더 경로 가져오기;
        
        InputStream imageStream = new FileInputStream(
                DATA_DIRECTORY + "/" + name);
                //파일 이름으로 읽어올 파일의 경로 설정

        ByteArrayOutputStream buffer = new ByteArrayOutputStream();
        int read;
        byte[] imageByteArray = new byte[imageStream.available()];
        while ((read = imageStream.read(imageByteArray, 0, imageByteArray.length)) != -1) {
            buffer.write(imageByteArray, 0, read);
        }
        buffer.flush();
        byte[] targetArray = buffer.toByteArray();
        imageStream.close();
        
        return new ResponseEntity<byte[]>(targetArray, HttpStatus.OK);
    }

 

웹에서는 받아온 바이트 배열을 blob으로 변경하여, 사용 할 수 있음.