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

要使用antd上传组件upload和阿里oss实现上传功能，需要按照以下步骤进行设置：

安装依赖：使用npm或yarn安装antd和阿里oss的相关依赖。

npm install antd
npm install ali-oss

导入antd的upload组件和阿里oss的相关类。

import { Upload, message } from 'antd';
import OSS from 'ali-oss';

创建一个上传组件，并设置上传的方法。

class MyUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [], // 已上传文件列表
    };
  }

  // 上传前的钩子函数
  beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传JPG/PNG格式的图片!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小不能超过2MB!');
    }
    return isJpgOrPng && isLt2M;
  };

  // 上传文件到阿里oss
  customRequest = async ({ file }) => {
    try {
      // 创建阿里oss实例
      const ossClient = new OSS({
        region: 'your-oss-region',
        accessKeyId: 'your-oss-access-key-id',
        accessKeySecret: 'your-oss-access-key-secret',
        bucket: 'your-oss-bucket',
      });

      // 上传文件
      const result = await ossClient.put(file.name, file);

      // 更新已上传文件列表
      this.setState((prevState) => ({
        fileList: [...prevState.fileList, result.url],
      }));

      // 上传成功提示
      message.success('上传成功!');
    } catch (err) {
      // 上传失败提示
      message.error('上传失败!');
    }
  };

  render() {
    const { fileList } = this.state;

    return (
      <Upload
        beforeUpload={this.beforeUpload}
        customRequest={this.customRequest}
        fileList={fileList}
      >
        <Button icon={<UploadOutlined />}>上传文件</Button>
      </Upload>
    );
  }
}

在上面的代码中，需要将以下参数替换为你自己的阿里oss参数：

your-oss-region：阿里oss的地域信息，例如oss-cn-hangzhou。
your-oss-access-key-id：阿里oss的AccessKeyId。
your-oss-access-key-secret：阿里oss的AccessKeySecret。
your-oss-bucket：阿里oss的Bucket名称。

在你的Vue组件中使用MyUpload组件。

<template>
  <div>
    <MyUpload />
  </div>
</template>

<script>
import MyUpload from './MyUpload';

export default {
  components: {
    MyUpload,
  },
};
</script>

这样就完成了使用antd上传组件upload和阿里oss实现上传功能的设置。当用户选择文件并点击上传按钮时，文件会被上传到阿里oss，并将上传成功后的文件URL添加到已上传文件列表中