使用 FileReader API 时无法设置 Vue 数据变量答案

【问题标题】：Can't set Vue data variable when using FileReader API使用 FileReader API 时无法设置 Vue 数据变量
【发布时间】：2018-05-05 01:51:11
【问题描述】：

在我的应用程序中，我试图允许用户上传包含 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');
        }
      }

【问题讨论】：

我认为问题是这个let orderFiles = this.orderFiles(files)。您正在调用像方法一样的变量。
不幸的是，更改不会影响任何事情。仍然无法设置数据属性
你永远不会设置jsonData的值。
我无法在 onload 中设置 jsonData 的值，因为它记录为未定义。因此，如果我尝试通过执行 this.jsonData = jsonResult 来设置值，我会得到无法将 jsonResult 设置为未定义的响应。

标签： javascript vue.js ecmascript-6 vuejs2

【解决方案1】：

您正在调用orderFiles，就像它是一种方法一样，您需要使用JSON.parse() 解析json 以将其用作对象。在下面的代码中，我将未解析的字符串表示形式放入 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>

【讨论】：