2
私はバグの多い問題があり、アップロードボタンをクリックした後にこのダイアログが表示されないようにする方法がわかりません。アップロードボタンをクリックした後に2回目にアップロードダイアログが表示される
私はを使用しています。Vuejsフロントエンド用フレームワーク。
input type="File"から表示されるダイアログから自分のファイル-Imageを選択してから、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>