React.js, Spring Boot 환경에서 이미지 업로드

구성

• Front End(React.js)
• Back End(Spring Boot)
• Image Server(API)

시나리오

1. Front에서 파일을 선택하여 Form Data를 Back End에 전송
2. Back End에서 파일을 받아서 RestTemplate을 이용하여 binary 데이터 형태로 Image Server에 전송

FrontEnd(React.js)

import React, { useState } from "react";
import axios from "axios";

const Front = () => {
  const [file, setFile] = useState(null);

  /**
   * 파일변경감지
   */
  const onChangeFile = (e) => {
    if (e.target.files && e.target.files.length > 0) {
      setFile(e.target.files[0]);
    }
  };

  /**
   * 파일업로드
   */
  const onClickUpload = async () => {
    const formData = new FormData();
    formData.append("param1", "파일외넘길값1");
    formData.append("param2", "파일외넘길값2");
    formData.append("file", file);
    const response = await axios.post("back end url", {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
    console.log(response);
  };

  return (
    <div>
      <input type="file" onChange={onChangeFile} />
      <button onClick={onClickUpload}>업로드</button>
    </div>
  );
};

BackEnd(Spring)

package com.test.controller;

import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import org.apache.commons.httpclient.HttpStatus;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.multipart.MultipartFile;

import com.test.common.ApiResponse;

@RestController
public class UploadController {

    /**
     * <pre>
     * 이미지 업로드
     * 업로드된 파일을 다시 API 서버로 전송한다
     * </pre>
     * @param param1 파일외넘길변수1
     * @param param2 파일외넘길변수2
     * @param multipartFile 파일
     */
    @PostMapping("/uploadImage")
    public ApiResponse uploadImage(
        @RequestParam("param1") String param1,
        @RequestParam("param2") String param2,
        @RequestParam("file") MultipartFile multipartFile) {

        String fileName = "파일명생성";

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.MULTIPART_FORM_DATA);

        try {
            HttpEntity<byte[]> entity = new HttpEntity<>(multipartFile.getBytes(), headers);
            RestTemplate restTemplate = new RestTemplate();

            // 이미지 전송
            ResponseEntity<String> responseEntity = restTemplate.postForEntity("API 서버 주소", entity, String.class);

            if (responseEntity.getStatusCodeValue() == HttpStatus.SC_OK) {
                new ApiResponse("0000", "success");
            } else {
                throw new Exception("image upload fail");
            }
        } catch (Exception e) {
            return new ApiResponse("9999", e.getMessage());
        }
    }
}