Ant Design 上传图片至阿里云OSS 的探索之路

2023-11-03 01:08:25

探索图片上传的强大组合：Ant Design 与阿里云 OSS

简介

在现代 Web 开发中，高效且可靠的文件上传解决方案至关重要。通过将 Ant Design 的优雅界面和阿里云 OSS 的强大存储功能相结合，我们可以打造卓越的图片上传体验。本文将深入探讨这些强大技术的整合，从初始设置到高级技巧，全面指导您完成图片上传之旅。

初始设置

1. 安装依赖项

npm install antd @ant-design/icons

2. 引入组件

import { Upload, Icon, Modal } from 'antd';

3. 获取阿里云 OSS 凭证

从阿里云控制台获取 AccessKey ID 和 AccessKey Secret。

4. 创建 Upload 组件

const MyUpload = () => {
  // 状态管理
  const [loading, setLoading] = useState(false);
  const [fileList, setFileList] = useState([]);
  const [previewImage, setPreviewImage] = useState('');
  const [previewVisible, setPreviewVisible] = useState(false);

  // 预览图片
  const handlePreview = (file) => {
    setPreviewImage(file.url || file.thumbUrl);
    setPreviewVisible(true);
  };

  // 文件列表变化
  const handleChange = ({ fileList }) => setFileList(fileList);

  // 渲染
  return (
    <>
      <Upload
        action="https://example.com/upload"
        listType="picture"
        fileList={fileList}
        onPreview={handlePreview}
        onChange={handleChange}
      >
        <Button icon={<Icon type="upload" />}>选择图片</Button>
      </Upload>
      <Modal visible={previewVisible} footer={null} onCancel={() => setPreviewVisible(false)}>
        <img alt="example" style={{ width: '100%' }} src={previewImage} />
      </Modal>
    </>
  );
};

高级技巧

1. 配置阿里云 OSS 凭证

const STS_API = 'https://sts.aliyuncs.com';
const region = 'oss-cn-shenzhen';
const bucketName = 'my-bucket';

const fetchCredentials = async () => {
  const data = await fetch(`${STS_API}?Action=AssumeRole&RoleArn=...&RoleSessionName=...`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  }).then((res) => res.json());

  const { Credentials } = data;
  return {
    accessKeyId: Credentials.AccessKeyId,
    accessKeySecret: Credentials.AccessKeySecret,
    securityToken: Credentials.SecurityToken,
    region: region,
    bucketName: bucketName,
  };
};

2. 使用自定义请求头

const customRequest = ({ action, data, file, filename, headers, onProgress }) => {
  const { accessKeyId, accessKeySecret, securityToken } = await fetchCredentials();

  headers['x-oss-security-token'] = securityToken;

  const formData = new FormData();
  formData.append('key', file.uid);
  formData.append('OSSAccessKeyId', accessKeyId);
  formData.append('policy', policy);
  formData.append('signature', signature);
  formData.append('success_action_status', '200');
  formData.append('file', file);

  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => {
      if (xhr.status < 200 || xhr.status >= 300) {
        reject(new Error(xhr.statusText));
        return;
      }

      const result = JSON.parse(xhr.response);
      resolve(result);
    };

    xhr.onerror = (e) => {
      reject(e);
    };

    xhr.upload.onprogress = (e) => {
      onProgress({ percent: e.loaded / e.total * 100 });
    };

    xhr.open('POST', action, true);
    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
    for (const key in headers) {
      if (headers.hasOwnProperty(key)) {
        xhr.setRequestHeader(key, headers[key]);
      }
    }
    xhr.send(formData);
  });
};

3. 自定义文件名称

const filename = (file) => {
  const time = new Date();
  return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}-${time.getHours()}-${time.getMinutes()}-${time.getSeconds()}-${file.name}`;
};