Buefy：如何获取使用 <b-upload> 上传的文件的二进制内容？答案

【问题标题】：Buefy: How to get binary contents of file uploaded with <b-upload>?Buefy：如何获取使用 <b-upload> 上传的文件的二进制内容？
【发布时间】：2020-03-31 19:11:24
【问题描述】：

问题

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

我的尝试

doc for the Upload component 提到了File 对象。当我检查运行代码中的那些对象，我只看到文件元数据，比如文件大小和名称。我没有看到任何二进制文件数据。
我发现 this CodePen 看起来很有希望，但它会引发错误当我尝试上传文件时：

在“FileReader”上执行“readAsText”失败：参数 1 不是“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");

【问题讨论】：

标签： buefy

【解决方案1】：

在上面提到的the CodePen 中发现了错误。

这一行：

reader.readAsText(o[0]);

应该改为：

reader.readAsText(o);

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

【讨论】：