vue3.0中使用ant-design-vue上传文件

在Vue3.0中使用ant-design-vue上传文件，需要先安装ant-design-vue和axios模块：

npm install ant-design-vue axios --save

然后在需要使用上传组件的页面中，引入ant-design-vue和axios模块：

import { Upload, Button } from 'ant-design-vue';
import axios from 'axios';

然后在页面中，添加上传组件：

<template>
  <div>
    <upload
      :action="uploadUrl"
      :headers="headers"
      :showUploadList="false"
      :beforeUpload="beforeUpload"
      :onSuccess="onSuccess"
      :onError="onError"
    >
      <button>
        <a-button>
          <a-icon type="upload" /> Click to Upload
        </a-button>
      </button>
    </upload>
  </div>
</template>

其中，`uploadUrl`是上传文件的接口地址，`headers`是上传文件时需要携带的请求头，`beforeUpload`是上传文件前的校验函数，`onSuccess`和`onError`分别是上传成功和上传失败的回调函数。

在页面的`script`中，需要定义这些属性的值以及`beforeUpload`、`onSuccess`、`onError`函数的实现：

export default {
  name: 'UploadPage',
  components: {
    Upload,
    Button
  },
  data() {
    return {
      uploadUrl: '/api/upload',
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      }
    };
  },
  methods: {
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG/PNG file!');
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
        return false;
      }
      return true;
    },
    onSuccess(response, file) {
      this.$message.success('Upload successfully!');
    },
    onError(error, response, file) {
      this.$message.error('Upload error!');
    }
  }
};

其中，`beforeUpload`函数用来进行文件类型和大小的校验，`onSuccess`和`onError`函数用来处理上传成功和上传失败的情况。

最后，在页面的`style`中，可以添加一些样式来美化上传按钮：

button {
  margin-top: 16px;
}

button .ant-btn {
  width: 100%;
}

button .anticon-upload {
  margin-right: 8px;
}

这样，就可以在Vue3.0中使用ant-design-vue上传文件了。