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

在Vue3.0中使用ant-design-vue上传文件，可以按照以下步骤进行：

1. 安装ant-design-vue和axios

npm install ant-design-vue axios --save

2. 在main.js中引入ant-design-vue和axios，并注册组件

import { createApp } from 'vue'
import App from './App.vue'
import { Button, Upload } from 'ant-design-vue'
import axios from 'axios'

const app = createApp(App)

// 注册组件
app.use(Button)
app.use(Upload)

// 注册axios
app.config.globalProperties.$axios = axios

app.mount('#app')

3. 在组件中使用Upload组件进行文件上传

<template>
  <div>
    <a-upload
      :action="uploadUrl"
      :headers="uploadHeaders"
      :data="uploadData"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-progress="onProgress"
      :on-error="onError"
    >
      <a-button>上传文件</a-button>
    </a-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'http://localhost:3000/upload',
      uploadHeaders: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      },
      uploadData: {
        name: 'example'
      }
    }
  },
  methods: {
    beforeUpload(file) {
      console.log('beforeUpload', file)
    },
    onSuccess(response) {
      console.log('onSuccess', response)
    },
    onProgress(progress) {
      console.log('onProgress', progress)
    },
    onError(error) {
      console.log('onError', error)
    }
  }
}
</script>

在上面的示例中，我们使用了a-upload组件来上传文件。在组件中，我们可以通过props传入一些参数，比如上传接口的地址、请求头、上传的数据等。同时，还可以通过监听事件来处理上传的结果，比如上传成功、上传进度、上传失败等。

需要注意的是，我们在main.js中通过Vue的全局配置将axios注册到了Vue实例中，因此在组件中可以通过this.$axios来发起请求。在上传文件时，需要将文件数据添加到uploadData中，这样才能将文件上传到服务器。