파일 업로드와 미리보기 : React 이미지 파일 처리하기

 

파일을 선택하고 미리보기를 제공하는 React 컴포넌트는 이미지 파일을 선택한 후, 미리보기 이미지를 표시하고, 파일을 초기화할 수 있는 기능을 추가한다.

---

 

기능 설명

1. 파일 미리보기 :  사용자가 파일을 선택하면 handleFileChange 함수가 실행된다. 이미지 파일 URL을 생성하여 미리보기 URL을 상태로 저장한다.
2. 파일 초기화 : 사용자가 파일을 초기화할 수 있는 버튼을 제공하여, 선택한 파일을 상태에서 삭제할 수 있다.
3. 이미지 제한 : accept="image/*"속성을 사용하여 오직 이미지 파일만 선택할 수 있도록 제한한다.
4. 미리보기 이미지 표시 : url.createObjectURL(file)로 파일의 URL을 생성하고, 이를 <img> 태그로 미리보기 이미지를 보여준다.

---

사용예제

import React, { useState } from "react";

function FilePreviewExample() {
  const [previewFiles, setPreviewFiles] = useState([]);

  const handleFileChange = (event) => {
    const files = Array.from(event.target.files);
    const previews = files.map((file) => ({
      name: file.name,
      size: file.size,
      previewUrl: URL.createObjectURL(file),
    }));
    setPreviewFiles(previews);
  };

  const handleClear = () => {
    setPreviewFiles([]); // 상태 초기화
  };

  return (
    <div>
      <h3>파일 미리보기</h3>
      <input
        type="file"
        multiple
        accept="image/*"
        onChange={handleFileChange}
      />
      <button onClick={handleClear}>파일 초기화</button>
      <div style={{ marginTop: 16 }}>
        {previewFiles.map((file, index) => (
          <div key={index} style={{ marginBottom: 16 }}>
            <h4>{file.name} ({(file.size / 1024).toFixed(2)} KB)</h4>
            <img
              src={file.previewUrl}
              alt={file.name}
              style={{ maxWidth: "200px", maxHeight: "200px" }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

export default FilePreviewExample;

 

 

• <input type="file" accept="image/*" multiple />로 이미지 파일만 선택하도록 제한한다.
• 선택한 파일의 미리보기를 제공하며, URL.createObjectURL(file)을 사용하여 파일 URL을 생성한다.
• 선택된 이미지 파일은 화면에 미리보기 형태로 표시된다.
• "파일 초기화"버튼을 눌러 선택된 파일들을 초기화할 수 있다.