[React] 이미지 업로드 구현하기

너무나도 힘들어했던 이미지 업로드를 드디어 해냈다!! 야호야호~!

 

input - file

input에는 type 중 file 이라는 속성이 존재한다.

file은 이미지, 동영상과 같은 파일을 업로드하는 기능을 가지고 있다.

export default function Image() {
  return (
    <div>
        <input type="file" />
    </div>
  );
}

위 코드를 적용시키면 아래와 같이 [파일 선택]이라는 버튼과 함께 화면에 렌더링된다.

 

 

이미지 선택 & 미리보기

이미지를 선택하고 서버에 전송하기 전, 선택한 이미지를 화면에 렌더링을 할 것이다. 그래서 handleImageChange 라는 함수를 만들고, input의 onChange에 함수를 넣어주었다.

import { useState } from 'react';

function App() {
  const [image, setImage] = useState(null); // 선택한 이미지
  const [imageName, setImageName] = useState(null);

  const ReadImage = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onloadend = () => {
      setImage(reader.result);
    };
    if (file) {
      reader.readAsDataURL(file);
      setImageName(file.name);
    }
  };
  return (
    <div className="App">
      <img src={image}></img>
      <input type="file" onChange={ReadImage}/>
    </div>
  );
}

export default App;

우선 e.target.files를 이용하여 input에서 선택한 파일을 가져온다.

그 다음 FileReader 객체를 생성하고 onloadend를 이용하여 이미지를 읽은 후, 결과값을 image state에 저장해주었다.

이미지가 잘 불러와졌다면, 그 이미지를 url로 지정해주고, 이미지의 이름을 imageName state에 저장해주었다.

 

FileReader란 무엇일까?

FileReader ? 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해주는 객체이다.

 

FileReader에는 다양한 속성, 이벤트 핸들러, 메소드가 존재하는 데 많이 쓰는 거만 적어보았다!

FileReader.result	파일의 컨텐츠이다.
FileReader.onload	읽기 동작이 성공적으로 완료되었을 때 발생한다
FileReader.onloadend	읽기 동작이 끝났을 때마다 발생하는 것으로, 성공/실패와 상관없이 발생한다.
FileReader.readAsDataURL()	컨텐츠를 특정 blob이나 file에서 읽어오는 메소드이다. base64로 인코딩된 값을 반환해준다.

 

기여운 미피

위 코드를 실행하면 다음과 같이 사진이 잘 렌더링된다는 것을 알 수 있다!!

 

 

 

올린 파일을 콘솔에 찍어보면 요런 형태로 뜬다

먼가 알아둬야 할 것 같아서.. ㅎㅅㅎ

 

서버에 이미지 전송하기

그리고 대망의 서버에 이미지를 업로드 하는 코드를 짜볼 것이다..!

이 부분에서 제일 오류가 많이 났었다ㅜㅜ 한 6시간 동안 이 에러만 붙잡고 있었던 것 같다ㅜ

 

  const fetchRoomInfo = async () => {
    const formData = new FormData();
    const decodedImage = await decodeImage(image);
    const imageExtension = imageName.split(".").pop();
    const blobImage = new Blob([decodedImage], {
    	type: `image/${imageExtension}`,
    });
    formData.append("roomImg", blobImage, imageName);
    formData.append("request", JSON.stringify({ roomTitle: roomName }));
    try {
      const res = await axios.post(`https://dev.writeroom.shop/rooms/createRoom`, formData, {
        headers: {
          Authorization: `Bearer ${receivedToken}`,
        },
      });
    } catch (error) {
      console.error(error);
    }
  };

  const decodeImage = async (base64Image) => {
    const blobImage = await fetch(base64Image).then((res) => res.blob());
    return blobImage;
  };

이 코드가 나의 최종 이미지 업로드 구현이다... 코드를 하나하나 뜯어보도록 하겠슴미다..

 

const formData = new FormData();

우선 이미지 파일은 무조건 FormData 형태로 전송해줘야 한다. 따라서 FormData 객체를 생성해주었다.

 

const decodeImage = async (base64Image) => {
    const blobImage = await fetch(base64Image).then((res) => res.blob());
    return blobImage;
};

그리고 이 코드는 주어진 base64 형식의 이미지를 디코딩하여 Blob 객체로 반환해주는 함수이다.

내가 이미지를 보낼 서버는 blob으로 받아야 하기 때문에 변환한 거지만

만약 file로 받는 거라면 이 과정은 생략해도 된다.

 

const decodedImage = await decodeImage(image);
const imageExtension = imageName.split(".").pop();
const blobImage = new Blob([decodedImage], {
    type: `image/${imageExtension}`,
});

그리고 디코딩한 이미지를 가져와준다. 

imageExtension은 이미지 이름이 필요해서 가져온 것이니, 이미지의 이름이 딱히 필요없다면 이 과정도 생략 가능!!

 

formData.append("roomImg", blobImage, imageName);
formData.append("request", JSON.stringify({ roomTitle: roomName }));

그리고 생성해놓은 formData에 blob으로 바꿔준 이미지를 추가해준다.

아랫 줄은 서버에서 원하는 formData에 string 데이터도 있어서 넣어준 거다.

string과 blob 데이터를 한 번에 formData에 넣어서 전송한 건 처음이라 좀 많이 당황했다. 오류도 왕많이남..ㅜㅜ

그래도 어찌저찌해서 저렇게 성공을 했다 희희..

 

try {
  const res = await axios.post(`https://dev.writeroom.shop/rooms/createRoom`, formData, {
    headers: {
      Authorization: `Bearer ${receivedToken}`,
    },
  });
} catch (error) {
  console.error(error);
}

그리고 axios를 사용해서 formData 전송하면 끄읕~!~~!

 

 

총정리 !!

• input의 type 중 file 속성을 통하여 파일 선택 기능을 구현할 수 있다.
• FileReader를 사용하여 파일을 가져오고, 그 파일을 렌더링할 수 있다.
• 서버가 어떤 객체를 원하는 지에 따라 blob 객체로 디코딩하여 전송할 수도, 디코딩 과정 없이 그냥 전송할 수도 있다.
• FormData에 이미지를 추가한 후, axios를 사용하여 서버에 이미지를 전송할 수 있다.

 

 

이미지 업로드에 대해서 구글링을 몇 시간 동안 했더니 이제야 이미지 파일이 어떻게 바껴서 어떻게 전송되어야 하는지에 대해 이해할 수 있었다 !!! 이 글을 보시는 분들도 이미지 업로드에 성공하시길🍀🍀