Не удается установить переменную данных Vue при использовании API FileReader

Question

В моем приложении я пытаюсь разрешить пользователю загружать папку, содержащую файлы json. Затем я хочу иметь возможность циклически просматривать эти файлы и передавать каждый файл в объект данных (еще не здесь).

В настоящее время я даже не могу получить доступ к объекту данных, когда происходит процесс загрузки. Я начинаю задаваться вопросом, возможно ли это вообще таким способом или я должен попробовать что-то еще?

Я довольно новичок в Vue.

data() {
    orderedFiles: {}
    jsonData: "cat" // this is what I am trying to set to jsonResult
  }

Вот мои методы:

        async jsonLoop(files){
          for(let file of files){
          let self = this
          let fr = new FileReader()
          fr.onload = (e) => {
            console.log("onload FIRED")
              let jsonResult = e.target.result
              document.getElementById('Json').textContent = jsonResult
              console.log(self.jsonData) // undefined
            }
            fr.readAsText(file)
          }
        },
        loadFiles (e) {
        if (window.File && window.FileReader && window.FileList && window.Blob) {
          let files = Array.from(e.target.files)
          // sort files
          let orderFiles = this.orderFiles(files)
          this.jsonLoop(orderFiles)
          console.log(this.jsonData) // undefined
        }
      else {
      alert('The File APIs are not fully supported in this browser. Please use a different browser');
        }
      }

Answer 1

Вы вызываете orderFiles, как будто это метод, и вам нужно проанализировать json с JSON.parse(), чтобы использовать его в качестве объекта. В приведенном ниже коде я поместил непарсированное строковое представление в this.stringJSON, а разобранный json - в массив объектов в this.parsedJsonArray.

Попробуйте выбрать два файла json в примере.

Vue.component('v-form', {
  template: '#myform',
  data() {
    return {
      fileinput: '',
      // jsonData: [],
      parsedJsonArray: [],
      stringJSON: '',
      orderFiles: {},
    };
  },
  methods: {
    async jsonLoop(files) {
      const ourDiv = document.getElementById('Json');

      for (let file of files) {
        let self = this;
        let fr = new FileReader();
        fr.onload = (e) => {
          console.log("onload FIRED")
          let jsonResult = e.target.result;

          // add json to div text
          // ourDiv.textContent += jsonResult;

          // add unparsed json string to our data
          self.stringJSON += jsonResult;

          // adding parsed json to our jsonData as an array of objects
          self.parsedJsonArray = [...self.parsedJsonArray, JSON.parse(jsonResult)];
          console.log(self.parsedJsonArray);
        }
        fr.readAsText(file);
      }
    },
    loadFiles(e) {
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        let files = Array.from(e.target.files)
        // sort files
        // let orderFiles = this.orderFiles(files)
        this.jsonLoop(files)
        console.log(this.jsonData) // undefined
      } else {
        alert('The File APIs are not fully supported in this browser. Please use a different browser');
      }
    }
  }
});

new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <v-form></v-form>
  <div id="Json"></div>
</div>

<template id="myform">
    <form enctype="multipart/form-data">
        <input type="file" @change="loadFiles" multiple><br/><br/>
        String JSON: <span>{{ stringJSON }}</span>
    </form>
</template>