vue2 antd 上传文件,上传文件按钮分开写

你可以使用 `Upload` 组件中的 `beforeUpload` 属性来设置上传前的操作，然后在 `Upload` 组件中使用两个按钮来触发上传操作。

以下是示例代码：

<template>
  <div>
    <button @click="selectFile">选择文件</button>
    <button @click="upload">上传</button>
    <br>
    <upload
      :show-upload-list="false"
      :before-upload="beforeUpload"
      :headers="headers"
      :action="url"
      ref="upload"
    >
      <template slot="default">
        <a-upload-dragger>
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox"></a-icon>
          </p>
          <p class="ant-upload-text">点击或拖拽文件到此处上传</p>
        </a-upload-dragger>
      </template>
    </upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      url: 'your_upload_url',
      headers: {
        authorization: 'your_token'
      }
    }
  },
  methods: {
    selectFile() {
      this.$refs.upload.$el.querySelector('input[type=file]').click()
    },
    upload() {
      if (this.file) {
        this.$refs.upload.submit()
      } else {
        // 文件未选择
      }
    },
    beforeUpload(file) {
      this.file = file
      return false
    }
  }
}
</script>

在这个示例中，我们使用了两个按钮分别触发选择文件和上传操作。当用户点击选择文件按钮时，我们通过 `this.$refs.upload.$el.querySelector('input[type=file]').click()` 来触发 `Upload` 组件的文件选择操作。当用户选择了文件后，我们将文件保存到 `file` 变量中，然后在上传按钮的点击事件中调用 `this.$refs.upload.submit()` 来触发上传操作。在 `beforeUpload` 函数中，我们将选择的文件保存到 `file` 变量中，并返回 `false` 来阻止自动上传。这样，我们就可以在上传按钮的点击事件中手动触发上传操作了。