Question

我在使用文件读取器时遇到问题，它永远不会立即加载文件，就像排队一样。我的意思是：它从我第二次选择文件开始，但它首先上传了文件。

我能解决这个问题吗？

这里是代码。

        <v-text-field
          v-if="switch1"
          label="Upload Fattura"
          @click='onPickFile'
          v-model='fatturaFileName'
          prepend-icon="mdi-paperclip"
        ></v-text-field>
        <input
          type="file"
          style="display: none"
          ref="fileInput"
          accept="text/xml"
          @change="onFilePicked"
        >


  onPickFile () {
    this.$refs.fileInput.click();
     }`

 onFilePicked (event) {
      if (event) event.preventDefault();
      var files = event.target.files[0];
      if (files !== undefined) {
        this.fatturaFileName = files.name;

        // If valid, continue
        const fr = new FileReader();
        fr.readAsText(files);
        fr.addEventListener('load', () => {
          this.fatturaUpload = fr.result;
        });
      } else {
         this.fatturaFileName = ''
         this.fatturaFileObject = null
      }
      console.log(this.fatturaUpload);
  }

Answer 1

使用以下代码可以正常工作：

onFilePicked (event) {
      if (event) event.preventDefault();
      var fichier = event.target.files[0];
      if (fichier != undefined) {
           const fr = new FileReader();
        fr.readAsDataURL(fichier);
        var reader = new FileReader();
        let file = fichier;
        reader.readAsText(file, "UTF-8");
        reader.onload = evt => {
            console.log("1",evt.target.result)
        };
      } else {
        console.log("2",fichier)
         this.fatturaFileName = ''
         this.fatturaFileObject = null
      }
      console.log("3",this.fatturaUpload);
       this.fatturaFileName = '';
       this.fatturaFileObject = null;

    }

参见boussadjra（ Vuetify Template）的钢笔@boussadjra 在CodePen上。

文件阅读器不会首次加载-VUE.JS

1 个答案: