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

Question

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

我有它工作，直到我尝试选择与前一个加载的文件相同的文件，选择一个不同的文件工作完美。

我已经尝试清除看似有效的文件输入，但它仍然没有再次选择文件。

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

Codepen

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/[email protected]/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/[email protected]/dist/vuetify.min.js"></script>

Answer 1

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

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

您可以在关闭对话框时重置importedData，也可以像我一样移除手表。