당신이 만약 이미지를 업로드 하기전 input[type=file]을 통하여 preview 이미지를 만들고 싶다면.
URL의 메소드인 createObjectURL를 사용하면 된다.
예제 코드는 다음과 같다.
//만약 당신이 리액트를 사용한다면 상태를 통하여 이미지 태그를 업데이이트 해주는 방식을 사용하면 된다.
<input type="file" id="preview-input"/>
<img id="preview"/>
<script>
// id를 사용할 경우에는 getElementById가 성능면으로 더 이득이 생긴다.
const input = document.getElementById("preview-input")
// getElement를 사용해도 된다, 아래 처럼 querySelector를 이용여 톰 객체에 접근 하는 방법도 있다.
const preview = document.querySelector("#preview")
input.addEventListener("change", (e) => {
//이때 files의 타입은 FileList이다.
const file = e.target.files[0]
//메모리에 저장되는 파일 데이터를 URL 형식으로 만들어보자
//... 이시점에 정적인 데이터를 관리해주는 곳(cloudflare, asw... etc)로 데이터를 보내고 저장된 곳의 서빙주소를 받아서 최종적으로 form 으로 서버로 보내서 데이터 베이스에 저장할 때 사용하는 것이좋다.
const fileUrl = URL.createObjectURL(file) //blob형 식으로 이미지 업로드한 데이터를 받아 올 수 있다.
preview.src = fileUrl;
})
// 만약에 이미지 로드가 완료된 시점에 다른 행동을 추가 해주고 싶다면 다음 처럼 해보자
preview.onload = (e) => {
alert("이미지 로드완료!!"
}
</script>위의 예제 코드를 작성해 보면 자연스럽게 리액트이던 다른 라이브러리를 사용하던 간단하게 메모리에 저장된 이미지 파일을 프로뷰 형태로 보는 것이 가능하다.
여기서 그럼 저 주소를 그냥 저장 하면 되는 것이 아니냐는 의문이 들 수 있을 것 같은데 브라우저 메모리에 저장되어 있는 것이기 때문에 영구적으로 보관되는 데이터가 아니다.
takeaways