Question

问题

当我将<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");

Answer 1

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

此行：

public String getMyData() {
    return (String) getStateHelper().get("MYDATA." + getClientId());
}

public void setMyData(String data) {
    getStateHelper().put("MYDATA." + getClientId(), data);
}

应该是这样：

reader.readAsText(o[0]);

文件数据将位于变量reader.readAsText(o);中，就像上面的原始代码一样。

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

1 个答案: