4

问题

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

我试过的

  1. 上传组件的文档提及File对象。当我在运行代码中检查这些对象时，我只看到文件元数据，例如文件大小和名称。我没有看到任何二进制文件数据。
  2. 我发现这个 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");
4

1 回答 1

0

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

这一行：

reader.readAsText(o[0]);

应该是这样的：

reader.readAsText(o);

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

于 2019-12-06T22:27:22.367 回答