[Vue, JS] FileReader.onload 순서대로 실행(feat. Promise)

input 태그로 파일 불러올 때,

불러온 파일을 file -> blob -> base64로 변환하여 DB로 넣어주려고 한다.

이때 data에 초기화해둔 item에 변환한 값을 넣어주려고 하는데 문제는 변환한 값이 .onload의 안에 있어 로딩이 끝난 후 실행되어 한발 늦게 실행된다는 것이다.

 

promise.all을 사용해보라는 글을 찾아 아래처럼 짜보았다.

 

// data에서 item 초기화
data: () => ({
  item: null
})

// ...

methods: {
fileBlob (value) {
	this.item = value
  },
test () {
	  const file = this.$refs.fileUploader.files[0] // 파일 불러오기
      const blob = new Blob([file], { type: file.type }) // blob으로 변환
      const testBlob = new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = async () => { // async
          try {
            const response = await this.fileBlob(reader.result)
            resolve(response)
          } catch (err) {
            reject(err)
          }
        }
        reader.readAsDataURL(blob) // blob값으로 ReadAsDataURL
      })
      Promise.all([testBlob])
    }
  }

원하는 동작은 잘 된다.

 

참고
https://stackoverflow.com/questions/67484579/problem-with-async-await-with-filereader-in-javascript