一把小小的钥匙, 开启使用Antd Pro上传图片到阿里云 OSS的新世界

2023-12-18 16:22:29

一、前言

在日常项目开发中, 我们经常需要上传图片到云存储服务, 以便于图片的存储、管理和分发。阿里云 OSS作为一款功能强大、安全可靠的云存储服务, 受到众多开发者的青睐。本文将以Ant Design Pro为框架, 介绍如何使用ProFormUploadButton组件的customRequestAPI自定义上传方法, 将图片轻松上传到阿里云 OSS。

二、准备工作

在开始之前, 您需要准备以下几项:

阿里云 OSS账号
Ant Design Pro项目
Node.js环境

如果您尚未安装Node.js, 请先访问Node.js官网下载并安装。

三、项目配置

在Ant Design Pro项目中, 安装阿里云 OSS SDK

npm install ali-oss --save

在项目根目录的.env文件中, 添加阿里云 OSS相关配置信息

REACT_APP_OSS_ACCESS_KEY_ID=YOUR_ACCESS_KEY_ID
REACT_APP_OSS_ACCESS_KEY_SECRET=YOUR_ACCESS_KEY_SECRET
REACT_APP_OSS_BUCKET=YOUR_BUCKET_NAME
REACT_APP_OSS_REGION=YOUR_REGION

四、自定义上传方法

接下来, 我们需要自定义一个上传方法, 以便于将图片上传到阿里云 OSS。

import { OSS } from 'ali-oss';

const customRequest = async (option) => {
  const client = new OSS({
    accessKeyId: process.env.REACT_APP_OSS_ACCESS_KEY_ID,
    accessKeySecret: process.env.REACT_APP_OSS_ACCESS_KEY_SECRET,
    region: process.env.REACT_APP_OSS_REGION,
    bucket: process.env.REACT_APP_OSS_BUCKET,
  });

  const result = await client.put(option.file.name, option.file);

  return result.url;
};

五、使用ProFormUploadButton组件

现在, 我们可以在项目中使用ProFormUploadButton组件来实现图片上传功能。

import { ProFormUploadButton } from '@ant-design/pro-form';

const MyForm = () => {
  return (
    <Form
      layout="horizontal"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        name="avatar"
        label="头像"
        valuePropName="fileList"
        getValueFromEvent={(norm) => {
          if (Array.isArray(norm)) {
            return norm;
          }
          return norm && norm.fileList;
        }}
      >
        <ProFormUploadButton
          name="avatar"
          customRequest={customRequest}
          listType="picture"
        />
      </Form.Item>
    </Form>
  );
};