Question

我遇到了一个非常错误的问题，我不知道在点击上传按钮后如何阻止此对话框出现。

我使用 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>

Answer 1

您再次呼叫您上传一次的文件的点击事件。

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

单击按钮后第二次出现上载对话框

1 个答案: