vue-antd-upliad文件上传打开选择文件弹框出现前进行的事件

今天遇到这个一个问题，是antd的上传，上传之前要进行判断，如果之前上传过一次，那就会有一个提示弹出，然后判断他是继续操作还是取消操作，点击确定按钮后呢，我的提示框消失，上传的弹框弹出，但是要再次点击一次才会触发事件。

我的代码如下：

<template>
  <div>
    <a-upload
        name="file"
        :multiple="true"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :headers="headers"
        @change="handleChange"
    >
   	   <a-button @click="shangchuan">Click to Upload </a-button>
    </a-upload>
    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
      <span>你之前已经上传过了，确定再次上传吗？</span>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headers: {
        authorization: 'authorization-text',
      },
      visible:false,
    };
  },
  methods: {
    // 跟这个没有关系
    handleChange() {

    },
    shangchuan(){
      this.visible = true
    },
    handleOk(){
      this.visible = false
    },
  },
};
</script>

---

然后这个是在网上找的大佬的解决办法，https://www.cnblogs.com/liangpi/p/13086110.html。
虽然他的是element，但是解决思路在antd也是一样的。

思路：通过绑定外层的button来处理上传文件之前的事件，确定之后，再调用里面的buttom方法，调用上传的方法，秒啊。

修改后的代码如下：

<template>
  <div>
    <a-upload
        name="file"
        :multiple="true"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :headers="headers"
        @change="handleChange"
    >
    // 上传文件的事件
    <a-button ref="btn">Click to Upload </a-button>
    </a-upload>
    // 上传之前的事件
    <a-button type="primary" @click="shangchuan" class="yangshi" >Open Modal</a-button>
    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
      <span>你之前已经上传过了，确定再次上传吗？</span>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headers: {
        authorization: 'authorization-text',
      },
      visible:false,
    };
  },
  methods: {
    // 跟这个没有关系
    handleChange() {

    },
    shangchuan(){
      this.visible = true
    },
    handleOk(){
      this.visible = false
      // 上传前的事件处理完成后，触发上传文件的事件
      this.$refs["btn"].$el.click()
    },
  },
};
</script>
<style scoped>
.yangshi{
  position: absolute;
  /*设置定位，让两个按钮重叠在一起？*/
}
</style>

---

然后就解决了，这个问题。