使用 vuetify-upload-button 读取文本文件

Question

我需要使用 Vuetify 在 VueJS App 中读取上传的文本文件。我发现没有输入文件元素，所以我使用 vuetify-upload-button 包。

不过，好像没法看。

是否可以使用 vuetify upload-btn 标签读取文件？

HTML

<upload-btn
 title="Choose File"
  block
  color="green"
  @file-update="updateFile"
  ></upload-btn>

JS

updateFile(x) {
  const reader = new FileReader();
  const file = e.target.files[0];
  reader.onload = e => console.log(e.target.result);
  reader.readAsText(file);
}

Answer 1

您正在使用的包 returns e.target.files（如果是多个）或 e.target.files[0]（如果是单数）。您无权通过此套餐参加活动。

所以在你的情况下——对于单数，你的整个方法可以是：

updateFile(file) {
  const reader = new FileReader()

  reader.onload = e => console.log(e.target.result)    

  reader.readAsText(file)
}

Answer 2

只是更新以防其他人遇到这个问题。 vuetify-upload-button 现已弃用，Vuetify 添加了自己的文件上传组件。

https://vuetifyjs.com/en/components/file-inputs/