Vuetify 文件输入接受文本/csv 不起作用答案

【问题标题】：Vuetify file input accept text/csv not workingVuetify 文件输入接受文本/csv 不起作用
【发布时间】：2021-02-16 00:11:49
【问题描述】：

我有一个 Vuetify 输入：

<v-file-input
  accept="text/csv"
  label="File input"
  placeholder="Select your CSV files"
></v-file-input>

我只想上传 CSV 文件，但 accept="text/csv" 不起作用，我可以上传任何文件，

我已经测试了其他类型，例如 accept="image/*" 及其工作。

https://codepen.io/AiAbdrahim/pen/oNLyYvm

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.16/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.16/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app">
  <v-app id="inspire">
    <v-file-input
      accept="text/csv"
      label="File input"
      placeholder="Select your CSV files"
    ></v-file-input>
  </v-app>
</div>

【问题讨论】：

标签： javascript html vue.js vuetify.js mime-types

【解决方案1】：

你可以试试这样的东西，它适用于 vue。

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

并编写一个setUploadFile方法

myUploadFile(){
 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")
 }
}

【讨论】：

【解决方案2】：

它与 Vuetify 无关。您插入了错误的接受值。 html-input-file-accept-attribute-file-type-csv

【讨论】：