URL.createObjectURL(objectURL 혹은 blob)
예시)
inputThumbnailHandeler(e) {
this.setState({
thumbnail: URL.createObjectURL(e.target.files[0])
})
}
특정 파일 객체나 로컬 파일 또는 데이터의 참조를 가리키는 새로운 객체 URL을 생성한다.
생성한 값은 현재 창이나, 객체를 생성한 문서 내에서만 유효하다.
새 객체 URL은 특정 File 객체나 Blob 객체로 표현할 수 있다.
매개변수로 전달한 blob는 URL을 생성할 File 객체나 Blob 객체이다.
생서된 objectURL은 해당 파일의 전체 내용을 URL 텍스트로 변환한 값이다.
객체의 URL의 사용을 마쳤다면, 아래 메서드를 호출해 메모리에서 해제해주는 것이 좋다.
URL.revokeObjectURL(objectURL);
참고
URL.createObjectURL()
발생일: 2013.07.19 문제: `URL.createObjectURL()`이란 게 있었네. 요고 뭐지? 해결책: https://developer.mozilla.org/en-US/docs/Web/API/window.URL.createObjectURL 특정 파일 객체나 로컬 파일 또는 데이터..
ohgyun.com
developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
URL.createObjectURL() - Web APIs | MDN
The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File o
developer.mozilla.org
medium.com/@650egor/react-30-day-challenge-day-2-image-upload-preview-2d534f8eaaa
Displaying a preview of an image upload in React
Show your user a preview of the photo they want to upload
medium.com
'HTML, DOM, Node.js' 카테고리의 다른 글
| windows를 위한 nvm (0) | 2025.02.12 |
|---|---|
| Form submission canceled because the form is not connected Error- React (0) | 2021.02.09 |
| Redux -React (0) | 2021.01.11 |
| Hooks를 위한 eslint 플러그인 설치법 - React (0) | 2021.01.07 |
| Hooks - React (0) | 2021.01.07 |