如何在AdminJS组件中带参数调用后端资源动作（AWS S3场景）

核心方案：复用api.resourceAction传递参数 #

AdminJS的api.resourceAction本身支持通过请求体传递额外参数，完全不需要自定义路由。直接在调用时把参数塞进请求payload，再在资源动作的处理函数里读取即可，比自定义路由+fetch简洁太多。

步骤1：定义支持参数的资源动作 #

在你的资源配置里，写好接收参数的S3上传动作：

const YourResource = {
  resource: YourModel,
  options: {
    actions: {
      uploadToS3: {
        actionType: 'record', // 按需求选'record'或'resource'
        handler: async (request, response, context) => {
          // 从request.payload里拿传递的参数
          const { customParam } = request.payload;
          const { record } = context;

          // 这里写你的S3上传逻辑，比如：
          // await s3Client.upload({
          //   Bucket: 'your-bucket',
          //   Key: `${customParam}-${record.id()}`,
          //   Body: record.params.fileBuffer
          // }).promise();

          return {
            record: record.toJSON(),
            message: `文件上传完成，参数：${customParam}`,
          };
        },
      },
    },
  },
};

步骤2：在组件里调用时传参 #

在自定义组件中，直接用api.resourceAction，把参数放在payload字段里：

import { useApi } from 'adminjs';

const YourCustomComponent = ({ record }) => {
  const api = useApi();

  const handleUpload = async () => {
    try {
      const response = await api.resourceAction(
        'uploadToS3',
        {
          resourceId: 'yourResourceId', // 替换成你的资源ID
          recordId: record.id(),
          payload: {
            customParam: '你的目标字符串参数',
          },
        },
      );
      console.log('上传成功：', response.data);
    } catch (err) {
      console.error('上传失败：', err);
    }
  };

  return <button onClick={handleUpload}>上传到S3</button>;
};

进阶优化：用useAction钩子简化代码 #

如果是做自定义动作按钮，还可以用AdminJS内置的useAction钩子，进一步简化调用流程：

import { useAction } from 'adminjs';

const UploadToS3Button = ({ record }) => {
  const { performAction } = useAction({
    actionName: 'uploadToS3',
    resourceId: 'yourResourceId',
    recordId: record.id(),
  });

  const handleClick = async () => {
    await performAction({
      payload: { customParam: '你的字符串参数' },
    });
  };

  return <button onClick={handleClick}>上传到S3</button>;
};

为啥这个方案更省心？ #

• 不用额外配置路由，直接复用AdminJS的内置API体系
• 自动继承AdminJS的权限校验逻辑，不用自己处理权限
• 统一的错误处理和响应格式，减少重复代码

内容的提问来源于stack exchange，提问作者Benjamin Merchin