이미지를 바꿨을 때 저장하지 않고도 바로 볼 수 있는 방법은 뭘까?
문제 발견
const userInfoForm = document.querySelector(".userInfo-form__avatar");
const handleAvatar = () => {
console.dir(getAvatar);
};
if (userInfoForm) {
getAvatar = userInfoForm.querySelector("input[type=file]");
getAvatar.addEventListener("change", handleAvatar);
}getAvatar.value에 이상한 경로값이 나왔다.
value: "C:\\fakepath\\My Thumbnail (4).jpg"
왜 정상적인 url이 아니라 fakepath라고 나오는 것일까?
그 이유는 일부 브라우저에서 JavaScript가 local file의 전체 경로를 알지 못하게 하는 보안 기능을 사용하기 때문이다.
해결
...
const handleAvatar = () => {
const fileReader = new FileReader();
let avatar = userInfoForm.querySelector("label img");
fileReader.readAsDataURL(getAvatar.files[0]);
fileReader.addEventListener("loadend", (event) => {
avatar.src = event.target.result;
});
};
...위 코드로 작성하니 문제가 해결되었다. 하나씩 살펴보자.
FileReader
유저의 컴퓨터에 저장된 파일의 내용(여기선 이미지)을 file이나 blob object를 통해 읽어낸다.
readAsDataURL
blob이나 file 형태의 데이터를 읽고 싶을 때 사용하는 method다.
loadend
파일을 다 읽었는지 확인하는 event다.
console.log(fileReader);
console.log(event.target);잘 변환되었는지 확인해보자.
✔ 결과값
FileReader {readyState: 0, result: null, error: null, onloadstart: null, onprogress: null, …}
FileReader {readyState: 2, result: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD…Ph3vi2nLqY6GzTAIiwFCwGgYjQACtyxFaYBRhQylzTAP/2Q==", error: null, onloadstart: null, onprogress: null, …}result: null이 result: url로 바뀐 것을 볼 수 있다.
