如何在vue中验证导入的文件是否为.csv文件类型

Question

我创建了一个文件选择功能，该功能允许用户选择<input type="file" accept=".csv" ref="file" v-on:input="handleFileUpload()" id="upload-photo" /> 个文件。代码如下：

onConfirm() {
        this.txtBrowse = this.file.name; //gets the file name with the extension
        //other functionalities
}

这使用户能够浏览.csv文件，而我的问题是，如果用户选择所有文件，则会显示所有文件并可以选择其他文件类型。

如何禁用所有文件选项或使用vue.js检查文件扩展名。 以下是用户选择文件的功能。

if(this.file.name.split(".").pop() != 'csv'){//check if file extension is csv
   Vue.alert.show( "Please select CSV file type", "error");
   return;
}

更新

目前，我暂时使用了以下陷阱：

{{1}}

但是，如果您有更好的方法，请帮帮我。

Answer 1

我处于类似情况，并已通过以下方式解决了该问题。 输入文件：

<input id="fileUpload" type="file" ref="inputFile" @input="setUploadFile()" hidden />

在setUploadFile函数内部：

setUploadFile(){
 this.file = this.$refs.inputFile.files[0];
 if (this.file.type == "text/csv"){
    // Api call
 }
 else {
   this.showAlert("error", "The file-type doesn't belong to text/csv")
 }
}

Answer 2

if(this.file.name.split(".").pop() != 'csv'){//check if file extension is csv
   Vue.alert.show( "Please select CSV file type", "error");
   return false;
}`enter code here`