VueJS: Как сделать чтение нескольких файлов в промисе?

Question

Пытаюсь во VueJS через FileReader прочитать несколько файлов. файлы предварительно выбраны в элементе v-file-inpute Vuetify и содержатся в массиве files

После выбора файлов необходимо прочитать их содержимое и поместить в другой массив content. После чтения всех файлов, надо что-то выполнить со всем прочитанным содержимым.

Сделал следующее, но не работает:

export default {
  data () {
    return {
      files: [],
      content: []
    }
  },
  methods: {
    convert() {
      this.content.splice(0)
      let ершыюcontent =  this.files.map( file => {
        return this.readFile(file)
      })
      Promise.all(content).then(
        responses => {
          console.log(content)
          console.log(responses)
          console.log("что-то делаем с содержимым всех файлов")
        }
      )

    },
    readFile(file) {
      let reader = new FileReader();
      reader.readAsText(file)
      let fileContent = {}
      reader.onload = () => {
        fileContent.name = file.name
        fileContent.originalText = reader.result
        return new Promise((resolve) => {
          resolve(fileContent)
        })
      }
    }
  }
}

console.log выводят массивы с undefined элементами.

Answer 1

метод readFile ничего не возвращает, поэтому Promise.all работает не так, как ожидается.

Для решения этот метод должен возвращать Promise, который разрешался бы в момент загрузки файла.

readFile(file) {
    return new Promise((resolve) => {
        let reader = new FileReader();
        reader.readAsText(file);
        let fileContent = {};
        reader.onload = () => {
            fileContent.name = file.name;
            fileContent.originalText = reader.result;
            resolve(fileContent)
        };
    });
}

БЛОГ НА HUSL

VueJS: Как сделать чтение нескольких файлов в промисе?

Ответы (1 шт):