Buefy:如何获取使用 上传的文件的二进制内容？

Question

问题

当我添加 <b-upload>组件添加到页面，它看起来很棒，我可以向其中添加文件，并且可以获得 姓名 的文件。但是我如何获得 文件内容 ?

我试过的

doc for the Upload component提File对象。当我
在运行代码中检查这些对象，我只看到文件元数据，
比如文件大小和名称。我没有看到任何二进制文件数据。

我找到了 this CodePen看起来很有希望，但它会引发错误
当我尝试上传文件时:

Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'

这是来自 CodePen 的 HTML:

<div id="app" class="container">
  <b-field class="file">
    <b-upload v-model="files">
      <a class="button is-primary">
        <b-icon icon="upload"></b-icon>
        <span>Click to upload</span>
      </a>
    </b-upload>
    <span class="file-name" v-if="files && files.length">
      {{ files[0].name }}
    </span>
  </b-field>
</div>

这是 Javascript:

Vue.use(Buefy.default);

const example = {
  data() {
    return {
      files: []
    };
  },
  watch: {
    files: function(o, n) {
      var reader = new FileReader();
      reader.onload = e => this.$emit("load", e.target.result);
      reader.readAsText(o[0]);  // This line throws the error.
      alert();
    }
  }
};

const app = new Vue(example);

app.$mount("#app");

Answer 1

在 the CodePen 中发现错误我上面引用了。

这一行:

reader.readAsText(o[0]);

应该是这样的:

reader.readAsText(o);

文件数据将在变量 e.target.result 中，如上面的原始代码。