[React/JavaScript] 이미지 파일 업로드 전 미리 보는 방법

이미지 file을 서버에 업로드하기 전, 등록한 파일을 화면에서 미리 보여주고 싶을 때가 있다.

URL.createObjectURL() 이용하기

부제: 이미지 미리 보기 url 생성

거두절미하고 리액트 코드부터 보시죠...

import React, { useState } from "react";

function ImageUploadExample() {
  //파일 미리볼 url을 저장해줄 state
  const [fileImage, setFileImage] = useState("");

  // 파일 저장
  const saveFileImage = (e) => {
    setFileImage(URL.createObjectURL(e.target.files[0]));
  };

  // 파일 삭제
  const deleteFileImage = () => {
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };

  return (
    <>
      <h1>이미지 미리보기</h1>
      <table>
        <tbody>
          <tr>
            <th>이미지</th>
            <td>
              <div>
                {fileImage && (
                  <img
                    alt="sample"
                    src={fileImage}
                    style={{ margin: "auto" }}
                  />
                )}
                <div
                  style={{
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <input
                    name="imgUpload"
                    type="file"
                    accept="image/*"
                    onChange={saveFileImage}
                  />

                  <button
                    style={{
                      backgroundColor: "gray",
                      color: "white",
                      width: "55px",
                      height: "40px",
                      cursor: "pointer",
                    }}
                    onClick={() => deleteFileImage()}
                  >
                    삭제
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </>
  );
}

export default ImageUploadExample;

우선 제일 처음 로드하면 화면엔 이렇게 떠있음

 

파일 선택을 클릭 후 이미지를 업로드 하면?

이렇게 이미지가 보여진다. (서버에 업로드 하지 않았음)

  // 파일 정보 저장
  const saveFileImage = (e) => {
    setFileImage(URL.createObjectURL(e.target.files[0]));
  };

여기 보면 input type="file"을 이용해 사진을 선택 후 열기를 클릭했을 때

사진 정보를 URL.createObjectURL()함수에 넘겨준 후

해당 함수에서 반환된 값을 state에 저장한다.

<img
  alt="sample"
  src={fileImage}
  style={{ margin: "auto" }}
/>

URL.createObjectURL()에서 반환된 값을 img의 src에 넘겨주면

위와 같이 열어 놓은 파일의 이미지를 미리 볼 수 있는 것이다.

 

URL.createObjectURL()함수는 지정한 object의 참조 URL을 담은 DOMString을 반환한다고 되어있다.

https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL

URL.createObjectURL() - Web API | MDN

해당 URL은 자신을 생성한 창의 document가 사라지면 함께 사라진다고 되어있으나, 함수가 한 번 호출될 때마다 객체 URL을 생성해준다고 한다.

그러니 잘못하면 메모리에 문제가 생기겠찌??

---

그때 해줘야할 것이 객체 URL 해제 함수를 호출하는 것이다.

URL.revokeObjectURL()

부제: 이미지 미리 보기 url  삭제 (메모리 관리)

  // 파일 삭제
  const deleteFileImage = () => {
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };

사용 시기는 다 다르겠지만... 나 같은 경우에는 사진 미리보기를 삭제할 때, 그리고 실제로 서버에 업로드하고 난 후에  (지금 업로드한 예시 코드에는 없음) 위와 같이 객체 URL을 삭제하게 해놓았다.

사용하는 방법은 URL.createObjectURL()의 값을 저장해놓은 변수를 URL.revokeObjectURL()함수의 매개변수로 다시 넘겨주면 된다.

간단간단~~

삭제 버튼을 누르고나면 미리 보여주던 사진이 없어진 것을 확인할 수 있다.

 

저렇게 파일 명이 나오는건 더 생각해보든지 해야할 듯...

 

근데 실무에서는 저 파일선택 버튼을 다른 예쁜 버튼과 연결시켜놓고 input type="file" 버튼은 display: none 해놓은 경우가 많은 것 같아서...

 

방법이 궁금해지면 추가로 찾아볼 예정이다ㅎㅎ

 

어떤 천사분이 답글 남겨주셨는데, input의 value를 없애주면 저 이름이 삭제된다고 하였다.