vue中antd组件库的upload组件的custom request属性使用示例

在使用ant-design-vue中的Upload上传组件时，可以通过customRequest属性自定义上传请求。具体可以按照以下步骤进行操作：

1. 首先需要在Vue组件中引入Upload组件：

<template>
  <a-upload
    :action="uploadUrl"
    :custom-request="handleUpload"
    :show-upload-list="false"
  >
    <a-button>上传文件</a-button>
  </a-upload>
</template>

<script>
import { Upload, Button } from 'ant-design-vue';

export default {
  components: {
    'a-upload': Upload,
    'a-button': Button
  },
  data() {
    return {
      uploadUrl: '/api/upload'
    }
  },
  methods: {
    handleUpload({ file, onSuccess, onError }) {
      // 通过自定义请求发送文件上传请求
      const formData = new FormData();
      formData.append('file', file);

      axios.post(this.uploadUrl, formData).then(res => {
        // 上传成功
        onSuccess(res, file);
      }).catch(err => {
        // 上传失败
        onError(err, file);
      });
    }
  }
}
</script>

2. 在上传组件中设置customRequest属性为一个函数，并在该函数中自定义上传请求。在示例代码中，我们通过axios库向服务器发送POST请求，将文件上传到指定的URL地址。如果上传成功，则调用onSuccess函数，如果上传失败，则调用onError函数。

<a-upload
  :action="uploadUrl"
  :custom-request="handleUpload"
  :show-upload-list="false"
>
  <a-button>上传文件</a-button>
</a-upload>