上传对话框第二次出现后点击按钮

我有一个非常麻烦的问题，我不知道如何防止这个对话框出现后，我点击上传按钮。上传对话框第二次出现后点击按钮

我使用Vuejs前端框架。

所以起初我从input type="File"出现的对话框中选择我的文件 - 图像，然后在我的按钮上触发我的onPickFile()方法，对话框再次出现上传。我只是希望它在第一次出现时不再选择图像。

我尝试使用<a>元素，但我得到了同样的问题。试用.prevent点击功能不起作用。

阅读有关VueJs事件处理的所有文档：https://vuejs.org/v2/guide/events.html但无法弄清楚。

这是我的例子：

<template> 
     <img :src="imageURL" height="100"> 
     <div class="file-field input-field"> 
      <div class="btn"> 
       <span>File</span> 
       <input type="file" name="cover-images" ref="fileInput" accept="image/*" @change.prevent="onFilePicked"> 
      </div> 
      <div class="file-path-wrapper"> 
       <input class="file-path validate" type="text" placeholder="Upload your Profile image"> 
      </div> 
     </div> 
     <!-- v-on:click --> 
     <button type="button" class="btn waves-effect waves-light " @click.prevent="onPickFile">Upload</button> 
</template> 

<script> 
    methods: { 
     onPickFile() { 
      var accessToken 
      var self = this; 
      firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) { 
       accessToken = idToken 

       self.$refs.fileInput.click() 

       axios.post('http://api-link/example', { 
         content_type: self.image.type 
        }, config). 
       then(response => { 
         self.uploadUrlLink = response.data.upload_url 

         axios.put(self.uploadUrlLink, self.image, config). 
         then(response => { 
          console.log(response) 
         }) 
         .catch(e => { 
          console.log(e) 
         }); 
        }) 
        .catch(e => { 
         console.log(e) 
        }); 
      }).catch(function(error) { 
       console.log(erroe) 
      }); 

     }, 
     onFilePicked(event) { 
      const files = event.target.files 
      let filename = files[0].name 
      if (filename.lastIndexOf('.') <= 0) { 
       console.log("no valid file") 
      } 
      const fileReader = new FileReader() 
      fileReader.addEventListener('load',() => { 
       this.imageURL = fileReader.result 
      }) 
      fileReader.readAsDataURL(files[0]) 
      this.image = files[0] 
      var contentype = files[0].type 
     }, 
    } 
</script>

来源

2017-10-14 Muli

你又在呼唤你曾经上传该文件的单击事件。

删除：self.$refs.fileInput.click()和点击您的按钮后，对话框将不会再显示。

来源

2017-10-14 15:26:55 FBC

上传对话框第二次出现后点击按钮

回答

相关问题