antd上传组件upload+阿里oss实现上传功能vue3

在Vue 3中实现使用Ant Design的Upload组件和阿里云OSS实现上传功能，可以按照以下步骤进行：

首先，安装Ant Design Vue和阿里云OSS的相关依赖：

npm install ant-design-vue@next --save
npm install oss-sdk@6.15.0 --save

在Vue组件中引入Upload和OSS的依赖：

<template>
  <a-upload
    :action="ossConfig.host"
    :before-upload="beforeUpload"
    :data="getUploadData"
    :headers="getUploadHeaders"
    :on-success="onUploadSuccess"
    :on-error="onUploadError"
  >
    <a-button>
      <a-upload-icon />
      选择文件
    </a-button>
  </a-upload>
</template>

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

export default {
  components: {
    AUpload: Upload,
    AButton: Button,
    AUploadIcon: Button,
  },
  setup() {
    const ossConfig = {
      accessKeyId: 'your-access-key-id',
      accessKeySecret: 'your-access-key-secret',
      bucket: 'your-bucket-name',
      region: 'your-bucket-region',
      host: 'your-oss-host',
    };
    const client = ref(null);

    const initOSSClient = () => {
      client.value = new OSS({
        accessKeyId: ossConfig.accessKeyId,
        accessKeySecret: ossConfig.accessKeySecret,
        bucket: ossConfig.bucket,
        region: ossConfig.region,
      });
    };

    const beforeUpload = (file) => {
      initOSSClient();
      const key = `uploads/${file.name}`;
      const uploadConfig = {
        key,
        policy: client.value.signatureExpireTime,
        OSSAccessKeyId: ossConfig.accessKeyId,
        success_action_status: '200',
        signature: client.value.signature,
      };
      file.url = `${ossConfig.host}/${key}`;
      file.headers = {
        'Content-Type': file.type,
        ...uploadConfig,
      };
      return true;
    };

    const getUploadData = (file) => {
      return {
        ...file.headers,
      };
    };

    const getUploadHeaders = (file) => {
      return {
        ...file.headers,
      };
    };

    const onUploadSuccess = (response, file) => {
      console.log('Upload Success', response, file);
    };

    const onUploadError = (error, response, file) => {
      console.error('Upload Error', error, response, file);
    };

    return {
      ossConfig,
      beforeUpload,
      getUploadData,
      getUploadHeaders,
      onUploadSuccess,
      onUploadError,
    };
  },
};
</script>

在上述代码中，我们首先引入了Ant Design Vue的Upload组件和阿里云OSS的依赖。然后，我们在setup()函数中定义了一些需要用到的变量和方法。其中，ossConfig是阿里云OSS的配置信息，client是OSS的客户端实例。

initOSSClient()方法用于初始化OSS客户端实例，beforeUpload()方法用于在上传之前设置文件的URL和请求头，getUploadData()和getUploadHeaders()方法用于获取文件上传时的请求数据和请求头，onUploadSuccess()和onUploadError()方法用于处理上传成功和上传失败的回调。

最后，我们在模板中使用Ant Design的Upload组件，并配置相关属性和事件，实现了上传功能。

请注意替换ossConfig中的配置信息为您自己的阿里云OSS的配置。同时，您还需要在阿里云OSS的控制台创建一个Bucket，并将其配置信息填入ossConfig中的对应字段中。

希望对你有帮助