<template>
  <div style="padding:50px;">
    <Button style="width:150px;" type="primary" @click="beforeUpload">上傳</Button>
    <Upload ref="upload"
        action="http://jsonplaceholder.typicode.com/posts/"
        :on-success="successHandle"
        :data="uploadParams"
    >
    </Upload>

    <Modal v-model="show" title="上傳前請先選擇地域">
      <Select v-model="city" placeholder="Select your city">
        <Option value="beijing">New York</Option>
        <Option value="shanghai">London</Option>
        <Option value="shenzhen">Sydney</Option>
      </Select>

      <!--   不能用Modal默認的提交，不然做不了校驗，@on-ok="selectedCity"   -->
      <template  #footer>
        <Button @click="show=false">取消</Button>
        <Button type="primary" @click="selectedCity">確定</Button>
      </template>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "beforeUpload",
  data() {
    return {
      uploadParams:{},  // 上傳接口需要帶的參數
      show:false,
      city:"",    // 上傳前需要選擇城市
    }
  },
  methods:{
    successHandle() {},
    beforeUpload() {
      this.show = true;
      this.city = "";
    },
    selectedCity() {
      if(this.city) {
        this.show = false;
        this.$refs.upload.handleClick();      // 使用這個方法
      } else {
        this.$Message.warning("請選擇城市")
        this.show = true;
      }
    }
  }
}
</script>

<style scoped>

</style>

通過ref來 this.$refs.upload.handleClick(); // 使用這個方法

GIF 2024-1-5 23-56-27.gif