img src에 임시 업로드 파일 data 값 지정하기

input을 통해 파일을 업로드하고, src에 즉시 반영해서 이미지를 확인하려고 할 때, 아래와 같이 base64로 변환된 값을 넣으면 반영된 이미지를 즉시 확인할 수 있다.

<img src = "data:~~~"></img>

fileReader의 result 값을 사용하면 가능하다.
다음은 코드 예시이다.

<script setup>
const file = ref();
const src = ref(); // src에 넣을 값

// 파일에서 base64로 변환한 data 추출 함수
const fileToBase64 = (val) => new Promise((res) => {
  Object.assign(new FileReader(), { onload: (e) => res(e.target.result) }).readAsDataURL(val);
});

// input 태그에 적용할 함수
const onChangeFile = async (val) => {
  if (val) {
    file.value = new File([val], val.name.normalize('NFC'), { type: val.type }); // 파일명 깨짐 방지
    src.value = await fileToBase64(file.value);
  }
};
</script>