选择相同文件时VueJS重新读取文件输入

Question

我想要实现的是 select 一个文件并在新对话框中读取其内容。

我一直在工作，直到我尝试 select 与之前加载的文件相同的文件，select 不同的文件完美运行。

我已经尝试清除似乎有效的文件输入，但它仍然无法再次 select 文件。

请参阅下面的示例，非常感谢任何帮助！

new Vue({
  el: "#app",
  data: () => ({
    importedData: null,
    dialogImport: false
  }),
  watch: {
    importedData: {
      handler() {
        this.checkData();
      },
      deep: true
    }
  },
  methods: {
    openFileExplorer() {
      this.$refs.fileInputImport.value = "";
      this.$refs.fileInputImport.click();
    },
    selectFile(e) {
      const self = this;
      const file = e.target.files[0];
      let reader = new FileReader();
      reader.onload = e => {
        self.importedData = reader.result;
        self.checkedData = true;
      };
      reader.readAsText(file);
    },
    checkData() {
      // check the file
      this.dialogImport = true;
    }
  }
});

<link href="https://unpkg.com/vuetify@0.17.4/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">

      <input ref="fileInputImport" type="file" name="fileInputImport" @change="selectFile">

      <v-btn color="primary" @click.stop="openFileExplorer()">Choose file</v-btn>


      <v-dialog v-model="dialogImport" fullscreen transition="dialog-bottom-transition" :overlay="false" scrollable>
        <v-container class="ma-0 pa-0 white" style="max-width:100%">
          <v-layout row wrap justify-left>

            <v-card style="width:100%;">
              <v-toolbar class="amber lighten-1 elevation-0">
                <v-toolbar-title>Imported data</v-toolbar-title>
                <v-spacer></v-spacer>
                <div>
                  <v-flex xs12>
                    <v-container fluid>
                      <v-layout row align-center justify-center>

                        <v-flex>
                          <v-tooltip bottom close-delay="0">
                            <v-btn icon slot="activator" @click.native="dialogImport = false">
                              <v-icon>close</v-icon>
                            </v-btn>
                            <span>Close</span>
                          </v-tooltip>
                        </v-flex>

                      </v-layout>
                    </v-container>
                  </v-flex>
                </div>
              </v-toolbar>
              <div>{{ importedData }}</div>
            </v-card>
          </v-layout>
        </v-container>
      </v-dialog>

    </div>
  </v-app>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@0.17.4/dist/vuetify.min.js"></script>

Answer 1

我认为不需要 watch。这是更新后的 codepen

它能够阅读文本并将其分配给 importedData。但是当你 select 相同的文件时 importedData 有相同的内容， watch 没有尝试 this.checkData().

关闭对话框时重置 importedData 或像我一样移除手表。

选择相同文件时VueJS重新读取文件输入

VueJS re-read file input when selecting the same file

html

javascript

vuejs2

vuetify.js