[Javascript] 파일 업로드와 프리뷰 구현하기

자바스크립트로 이미지 파일을 업로드하고 프리뷰를 보는 방법에 대해 알아보자.

 

input 태그 사용하여 이미지 파일 업로드 하기

<input
  id="file-upload"
  name="file-upload"
  type="file"
  accept="image/*"
  onChange={onFileChange}
/>

 

input 이벤트에 파일을 담아온다. 

const [filePreview, setFilePreview] = useState("");

const onFileChange = (e) => {
    const {
      target: { files },
    } = e;
    
    const imgFile = files[0];
    const url = URL.createObjectURL(imgFile);
    setFilePreview(url);
};

• 이미지 하나만 올리기 때문에 첫번째 이미지를 선택한다.
• URL.createObjectURL() 이미지 blob 객체를 url로 바꿔주는 역할을 한다. 이를 setFilePreview에 넣는다.

 

프리뷰 보여주기

{filePreview ? (
  <>
    <FileBg>
      <BiCamera
        style={{ color: "#fff", fontSize: "30px", width: "100%" }}
      />
      <FileText>눌러서 파일 변경</FileText>
    </FileBg>
    <Img src={filePreview} alt="uploadImage" />
  </>
) : (
  <SpanWrapper>
    <BiPlus style={{ fontSize: "40px", color: "#868e96" }} />
    <Span>눌러서 파일 등록</Span>
  </SpanWrapper>
)}

• setFilePreview에 이미지 링크가 있는지, 없는지에 따라 이미지 프리뷰나 기본 업로드 화면을 보여줄 수 있다.