[240626 TIL] createObjectUrl

createObjectUrl

파일을 다룰때, 이미지 파일등의 미리보기를 띄우거나 할 경우에 유용하게 사용할 수 있다고 합니다!
이 간단한걸 몰라서 막 base64로 바꾸고 했었습니다 ㅠ.ㅜ
사용법은 매우 간단합니다. 그냥 URL.createObjectUrl(file) 입니다..

    function handleFileInput(event) {
      const file = event.target.files[0];
      const url = URL.createObjectURL(file);
      // URL을 사용하여 파일을 미리 보기
      document.getElementById('preview').src = url;
    }

    // HTML
    // <input type="file" onChange="handleFileInput(event)" />
    // <img id="preview" />

간단하지만 몰랐던 것! 정리! 완료!