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

要实现使用Antd上传组件和阿里OSS实现上传功能，可以按照以下步骤进行操作：

安装Antd和阿里OSS的依赖包

npm install antd
npm install @ali/ali-oss

在代码中引入Antd的Upload组件和阿里OSS的SDK

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

创建一个OSS客户端实例，并配置OSS的访问信息，例如AccessKeyId、AccessKeySecret和Endpoint等

const client = new OSS({
  accessKeyId: 'YOUR_ACCESS_KEY_ID',
  accessKeySecret: 'YOUR_ACCESS_KEY_SECRET',
  endpoint: 'YOUR_OSS_ENDPOINT',
  bucket: 'YOUR_OSS_BUCKET',
});

在上传组件中配置上传的属性和事件处理函数

<Upload
  name="file"
  action="//upload-server-url"
  headers={{
    authorization: 'authorization-text',
  }}
  onSuccess={this.handleUploadSuccess}
  beforeUpload={this.handleBeforeUpload}
>
  <Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>

实现上传前的处理函数handleBeforeUpload，在这个函数中可以将文件上传到阿里OSS

handleBeforeUpload = (file) => {
  return new Promise((resolve, reject) => {
    client.put(file.name, file)
      .then(() => {
        resolve(false); // 阻止上传组件继续上传文件
      })
      .catch((error) => {
        message.error('Upload failed');
        reject(error);
      });
  });
};

实现上传成功的处理函数handleUploadSuccess，在这个函数中可以获取上传成功后的文件链接

handleUploadSuccess = (response) => {
  const { name } = response.file;
  const fileUrl = client.signatureUrl(name);
  console.log('File URL:', fileUrl);
};

这样就可以使用Antd的Upload组件和阿里OSS实现文件上传功能了。记得将YOUR_ACCESS_KEY_ID、YOUR_ACCESS_KEY_SECRET、YOUR_OSS_ENDPOINT和YOUR_OSS_BUCKET替换为你自己的访问信息