TIL43-02 Blob 의 활용, 이미지 파일 전송

FormData

• Blob을 이해하기 전에 FormData에 대한 이해가 필요하다.

• FormData는 HTML form 요소를 통해 전송되는 데이터를 캡슐화하기 위한 JavaScript의 인터페이스다.

• FormData 객체를 사용하면 파일 업로드와 같은 이진 데이터를 포함하는 AJAX 요청을 보낼 수 있다.

• 다음은 FormData 객체를 사용하여 username과 password를 전송하는 예시 코드다.

const formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'pass123');

• 위 코드에서 append() 메서드를 사용하여 username과 password 키와 각각의 값인 john과 pass123을 추가했다.

• 또한, FormData 객체는 파일 업로드와 같은 이진 데이터를 처리할 수 있다. 아래는 FormData 객체를 사용하여 이미지 파일을 전송하는 예시 코드다.

const formData = new FormData();
formData.append('image', file);

• 위 코드에서 append() 메서드를 사용하여 image 키와 파일 객체를 추가했다. 이 때, file은 input 요소의 files 프로퍼티에서 선택한 파일 객체를 의미한다.

• FormData 객체는 서버로 데이터를 전송할 때 Content-Type 헤더를 multipart/form-data로 설정한다. 이는 폼 데이터를 HTTP 요청 본문에 캡슐화하여 전송하는 방식으로, 이진 데이터를 전송하는 데 적합한 방식이다.

Blob의 활용

• Blob 객체는 웹 페이지에서 사용하는 다양한 유형의 데이터를 나타내는 데 사용되는 JavaScript 객체다. 이 객체는 파일이나 이미지 데이터와 같은 이진 데이터를 저장할 수 있다.

• 다음은 React에서 Blob 객체를 활용하여 이미지 파일을 백엔드에 전송하는 예시 코드다.

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

function App() {
  const [image, setImage] = useState(null);

  // 이미지 파일 선택 시 호출되는 함수
  function handleFileUpload(event) {
    const selectedFile = event.target.files[0];
    setImage(selectedFile);
  }

  // 이미지 파일 전송 시 호출되는 함수
  function handleFileSubmit(event) {
    event.preventDefault();

    // FormData 객체 생성
    const formData = new FormData();
    formData.append('file', image);

    // Axios로 파일 업로드 요청 보내기
    axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(response => {
      console.log(response.data);
    }).catch(error => {
      console.error(error);
    });
  }

  return (
    <div>
      <form onSubmit={handleFileSubmit}>
        <input type="file" onChange={handleFileUpload} />
        <button type="submit">Upload</button>
      </form>
    </div>
  );
}

export default App;

• 위 코드에서는 input 태그를 사용하여 이미지 파일을 선택하고, handleFileUpload 함수에서 선택한 파일을 useState 훅을 사용하여 상태로 저장한다.

• 그리고 handleFileSubmit 함수에서 FormData 객체를 생성하고, append 메서드를 사용하여 이미지 파일을 추가한다. 그리고 Axios의 post 메서드를 사용하여 /api/upload 엔드포인트로 요청을 보낸다. 이 때, headers 옵션을 설정하여 Content-Type을 multipart/form-data로 설정한다.

• 이와 같이 Blob 객체와 FormData 객체를 활용하여 이미지 파일을 전송할 수 있다.