html5 - FileReader怎麼一次讀取多個檔案？

Question

{程式碼...} 如上，一個支援多圖片上傳的input,怎麼用filereader本地讀取出每個圖片的dataurl？這個upload該怎麼寫？

ringa_lee · Answer

循環讀取啊

new Vue({
  el: 'app',
  methods: {
    async upload () {
      const files = event.target.files
      const uploadList = []
      console.log(files)

      const readFileAsync = file => new Promise(resolve => {
        const reader = new FileReader()
        reader.onload = evt => resolve(evt.target.result)
        reader.readAsDataURL(file)
      })

      for (let i = 0; i < files.length; i++) {
        uploadList.push(await readFileAsync(files[i]))
      }

      event.target.value = null

      console.log(uploadList)
    }
  }
})