antd上传文件OSS

最新推荐文章于 2025-05-30 22:52:59 发布

百事皆可乐i

最新推荐文章于 2025-05-30 22:52:59 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_39363320/article/details/106808309

本文将介绍如何利用Ant Design（antd）组件库中的上传功能，结合阿里云对象存储服务（OSS），实现文件上传的完整流程。通过封装特定的组件，可以便捷地在应用中集成这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装组件：

import React from 'react';
import { Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios';
class AliyunOSSUpload extends React.Component {
  state = {
    OSSData: {},
  };

  async componentDidMount() {
    await this.init();
  }

  init = async () => {
    try {
      const OSSData = await this.mockGetOSSData();
      this.setState({
        OSSData,
      });
    } catch (error) {
      message.error(error);
    }
  };

  mockGetOSSData = async () => {
    const { data } = await axios('/api/getNewWebImageToken', {
      params: {
        t: Date.now(),
      },
    });
    return { ...data, dir: '' };
  };

  onChange = ({ fileList }) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange([...fileList]);
    }
  };

  onRemove = (file) => {
    const { value, onChange } = this.props;
    const files = value.filter((v) => v.url !== file.url);
    if (onChange) {
      onChange(files);
    }
  };

  transformFile = (file) => {
    const { OSSData } = this.state;
    const suffix = file.name.slice(file.name.lastIndexOf('.'));
    const filename = Date.now() + suffix;
    const filekey = OSSData.dir + filename;
    file.url = 'https://img.cancangroup.com/' + filekey;
    file.key = filekey;
    return file;
  };

  getExtraData = (file) => {
    const { OSSData } = this.state;

    return {
      key: file.key,
      OSSAccessKeyId: OSSData.accessid,
      policy: OSSData.policy,
      Signature: OSSData.signature,
      //   success_action_status:200
    };
  };

  beforeUpload = async () => {
    const { OSSData } = this.state;
    const expire = OSSData.expire * 1000;

    if (expire < Date.now()) {
      await this.init();
    }
    return true;
  };

  render() {
    const { value } = this.props;
    const props = {
      name: 'file',
      fileList: value,
      action: this.state.OSSData.host,
      onChange: this.onChange,
      onRemove: this.onRemove,
      transformFile: this.transformFile,
      data: this.getExtraData,
      beforeUpload: this.beforeUpload,
    };
    return (
      <Upload {...props}>
        <Button>
          <UploadOutlined /> 点击上传
        </Button>
      </Upload>
    );
  }
}
export default AliyunOSSUpload;

使用：

<Form.Item name="expensePics">
  <AliyunOSSUpload onChange={setfileList} />
</Form.Item>
// 设置默认值：
 const list = arr.map((key) => {
  return {
     key,
     uid: key,
     name: key,
     status: 'done',
     url: 'https://img.cancangroup.com/' + key,
   };
 });
 setfileList(list);
 formModalEdit.setFieldsValue({ expensePics: list });