Вопрос
Когда я добавляю компонент <b-upload>
на страницу, она выглядит великолепно, я могу добавлять на нее файлы и получать имена файлов. Но как мне получить содержимое файла?
Что я пробовал
- В документе для компонента Upload упоминаются
File
объекта. Когда я проверяю эти объекты в работающем коде, я вижу только метаданные файла, такие как размер и имя файла. Я не вижу никаких данных двоичного файла. - Я нашел этот CodePen, который выглядит многообещающе, но выдает ошибку при попытке загрузить файл :
Не удалось выполнить «readAsText» для «FileReader»: параметр 1 не имеет типа «Blob».
Вот HTML из этого CodePen:
<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");