javascript - 使用 nuxt.js 导入文件(Vue 相当于 getElementById())

Question

我在我的某个组件中加载文件时遇到问题。在我使用 getElementById() 迁移到 Vue 之前它就起作用了。这是我尝试过的:在模板中:

<input type="file" accept=".obj" id="file" ref="OBJImport" name="objFile" @change="loadFileAsText()" single />

数据中:

data(){
    return {
         files: []
    }
}

在方法中:

methods: {  
    loadFileAsText: function() {
        if(process.client) {
            this.files = this.$refs.OBJImport.files[0];
            console.log(files);
         }
    }

但是当我尝试上传文件时，我得到:

ReferenceError: files is not defined

我也尝试过不使用[0]。将 .files[0] 更改为 .file 仍然会对 files 产生相同的错误。我应该怎么做才能将我的文件从模板获取到我的方法？谢谢!

Answer 1

从更改事件中删除 ():

<input type="file" accept=".obj" id="file" ref="OBJImport" name="objFile" @change="loadFileAsText" single />

使用默认事件参数

methods: {  
  loadFileAsText: function(e) {
    if(process.client) {
      //this.files = this.$refs.OBJImport.files[0];
      //console.log(files); // Here is this.files, not files, this is your initial error.
      this.files = e.target.files[0];
      console.log(this.files);
  }
}

您记录的文件不存在，这是您唯一的错误。另外，我还提供了另一种获取文件的方式。