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

Question

我创建了一个文件选择功能，允许用户选择.csv文件。代码如下：

<input type="file" accept=".csv" ref="file" v-on:input="handleFileUpload()" id="upload-photo" /> 

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

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

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

更新

截至目前，我暂时使用了以下诱捕：

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

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

标签： validationvue.jsimport-from-csv

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")
 }
}