使用nuxt.js导入文件（Vue等效于getElementById（））

2024-05-08 • 问答

我无法在其中一个组件中加载文件。在我使用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仍然会产生相同的错误。我应该怎么做才能将文件从模板转移到方法中？谢谢！

从更改事件中删除df = spark.createDataFrame([('1','2019-11-02','1',50),('1','2',10),'2019-11-01',110),80),('2',280),95),3000),130)],['Employee_ID','Created_Date','status','Time_in_Seconds']) df.groupBy('Employee_ID').pivot('status').agg({'Time_in_Seconds':'sum'}).show()：

()

使用默认事件参数

<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); } }不存在，这是您唯一的错误。此外，我还提供了另一种获取文件的方法。

使用nuxt.js导入文件（Vue等效于getElementById（））

zhangzhuhui 回答：使用nuxt.js导入文件（Vue等效于getElementById（））

大家都在问