问题
当我添加 <b-upload>
组件添加到页面,它看起来很棒,我可以向其中添加文件,并且可以获得 姓名 的文件。但是我如何获得 文件内容 ?
我试过的
File
对象。当我在运行代码中检查这些对象,我只看到文件元数据,
比如文件大小和名称。我没有看到任何二进制文件数据。
当我尝试上传文件时:
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");
最佳答案
在 the CodePen 中发现错误我上面引用了。
这一行:
reader.readAsText(o[0]);
应该是这样的:
reader.readAsText(o);
文件数据将在变量
e.target.result
中,如上面的原始代码。
关于Buefy:如何获取使用 <b-upload> 上传的文件的二进制内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59219113/