相关疑难解决方法(0)

我在Vuejs中使用vuetify组件作为前端.我想创建一个带文件上传的用户注册表单.我可以v-text-field在vuetify中创建一个表单但是如何上传文件.使用哪个组件或任何其他替代方式.

我正在尝试使用 vuetify 在 Vue.js 中上传文件，然后将上传的文件保存在我的数据对象中。

HTML：

<input id="file-upload" type="file" @change="onFileChange">

在我的方法中，我调用：

onFileChange(e) {

  var files = e.target.files || e.dataTransfer.files;
  if (!files.length) {
    return;
  }   
  this.editedPerson.id_file = e.target.files[0].name;
},

这 100% 有效。

但是，我确实想使用 Vuetify 组件：

<v-btn color="blue-grey" class="white--text" @click.native="openFileDialog">Upload<v-icon right dark>cloud_upload</v-icon></v-btn>

我隐藏了原始文件输入标签，但在这个 v-btn 组件上，我调用了以下方法：

openFileDialog() {
  document.getElementById('file-upload').click();
},

所以当我点击 v-btn 组件时，它模拟点击隐藏文件输入标签，我可以选择一个文件。

在更改输入标签时，我仍然可以使用 console.log 上传文件，但是

this.editedPerson.id_file = e.target.files[0].name;

不再有效。

发生这种情况有什么原因吗？