Javascript 在文件输入更改时多次调用处理程序

我需要创建一个按钮，在选择文件时触发输入文件并调用处理程序&AJAX：

<template>
<button id="ImportExcelBtn" type="button" class="ladda-button" data-color="mint" data-style="zoom-out" data-size="sm">
    <span class="ladda-label">Import Excel</span>
    <div class="hidden">
        <input type="file" id="fileUpload" @change="handleFileUpload">
    </div>
</button>

导入Excel

导出默认值{
道具：{
tablename:String，
modelname:String
},
数据：函数（）{
返回{
是的，
文件：{}
}
},
方法：{
handleFileUpload:函数（e）{
var self=这个；
self.file=e.target.files[0]；
self.importexel（）；
},
importExcel:函数（）{
var self=这个；
self.recursive=true；
var bodyFormData=新FormData（）；
bodyFormData.set（'tablename'，self.tablename）；
bodyFormData.append（'file'，self.file）；
Services.importExcel（bodyFormData）.然后（函数（响应）{
如果（response.data.status==“失败”）{
全局错误消息（响应数据消息）；
}否则{
console.log（'all-right'）；
}
}).catch（函数（错误）{
var error=Object.assign（{}，error）；
console.log（错误）；
全局.ErrorMessages（error.response）；
});
}
},
挂载：函数（）{
var self=这个；
$（文档）.ready（函数（）{
$（'#ImportExcelBtn'）。单击（函数（）{
if（自递归）{
self.recursive=false；
$（“#文件上载”）。单击（）；
}
});
})
}
}

首先，这很好，但是如果我选择另一个文件进行上传，那么在选择文件时不会调用处理程序，除非我第三次单击该按钮。

---

请注意，出于系统的目的，输入的最大值应该在按钮内，因此将其置于按钮外并将其同时放入div中不是一个选项…

请检查递归的所有赋值。如果单击按钮然后取消选择导致递归的文件将是false，然后“单击”处理程序将不执行任何操作

<script>
export default {
    props: {
        tablename: String,
        modelname: String
    },
    data: function() {
        return {
            recursive: true,
            file: {}
        }
    },
    methods: {
        handleFileUpload: function(e) {
            var self = this;
            self.file = e.target.files[0];
            self.importExcel();
        },
        importExcel: function() {
            var self = this;
            self.recursive = true;

            var bodyFormData = new FormData();
            bodyFormData.set('tablename', self.tablename);
            bodyFormData.append('file', self.file);

            Services.importExcel(bodyFormData).then(function(response) {
                if(response.data.status == 'failed'){
                    Global.ErrorMessages(response.data.messages);
                } else {
                    console.log('all right');
                }
            }).catch(function(error) {
                var error = Object.assign({}, error);
                console.log(error);
                Global.ErrorMessages(error.response);
            });
        }
    },
    mounted: function() {
        var self = this;
        $(document).ready(function () {
            $('#ImportExcelBtn').click(function() {
                if(self.recursive){
                    self.recursive = false;
                    $('#fileUpload').click();
                }
            });
        })
    }
}