Vuetify "csv only" 的 v-file-input 规则

Question

美好的一天，

我有一个 v-file-input 像这样：

<v-file-input
  :rules="rules"
  accept="text/csv"
  label="Select a CSV file..."
></v-file-input>

这是我的规则，用于检测文件何时没有“.csv”扩展名：

rules: [
  file => {
    const pattern = /\.csv$/;
    return (
      !file || pattern.test(file) || 'File type should be csv.'
    )
  }
],

但是没用。无论我 select .txt、.csv 还是 .jar，文件输入都认为它们都是无效的。

如何在非 csv 文件上得到它的唯一错误？

感谢您的帮助。

Answer 1

工作代码笔 link https://codepen.io/manojkmishra/pen/vYgaZOy。这在 windows 上运行良好，如果在 Mac 上出现任何问题，请检查 inputChanged(e) 函数中的文件类型并将其包含在 if 语句中。

HTML:

<div id="app">
<v-app id="inspire">
<v-file-input accept=".csv" label="Select a CSV file..." v-model="ffile"
 @change="inputChanged"></v-file-input>
<p v-show="show">
  {{message}}
</p>
</v-app>
</div>

JS:

new Vue({  el: '#app',
vuetify: new Vuetify(),
data(){  return{ ffile:[], message:"",show:false} },
methods:{
 inputChanged(e) 
   { console.log('file type=',this.ffile.type)
     if (this.ffile.type.match('application/vnd.ms-excel'))
       {  console.log('csv matched');
          this.show=false;
       }
    else{ console.log('not matched')
          this.show=true;
          this.message="this is not a csv file" ;
        }
     }
   }
 })

Vuetify "csv only" 的 v-file-input 规则

Vuetify v-file-input rule for "csv only"

vuejs2

vuetify.js