Strapi v4前端提交表单发邮件及重写create方法指引

一、先完成邮件服务基础配置 #

Strapi v4的邮件配置文件为config/plugins.js（无则新建），以下以Nodemailer为例配置SMTP服务：

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'nodemailer',
      providerOptions: {
        host: env('SMTP_HOST', 'smtp.example.com'),
        port: env('SMTP_PORT', 587),
        auth: {
          user: env('SMTP_USERNAME'),
          pass: env('SMTP_PASSWORD'),
        },
      },
      settings: {
        defaultFrom: 'your-email@example.com',
        defaultReplyTo: 'your-email@example.com',
      },
    },
  },
});

同时在项目根目录的.env文件中补充SMTP环境变量：

SMTP_HOST=smtp.example.com
SMTP_PORT=587
SMTP_USERNAME=你的SMTP账号
SMTP_PASSWORD=你的SMTP密码

二、重写目标内容类型的create方法 #

假设你的表单对应内容类型为contact-form（替换为你实际的内容类型ID），编辑src/api/contact-form/controllers/contact-form.js（无则新建）：

const { createCoreController } = require('@strapi/strapi').factories;

module.exports = createCoreController('api::contact-form.contact-form', ({ strapi }) => ({
  async create(ctx) {
    // 先调用原生create方法保存表单数据
    const response = await super.create(ctx);
    const formData = response.data.attributes;

    try {
      // 调用Strapi内置邮件服务发送邮件
      await strapi.plugins['email'].services.email.send({
        to: 'admin@example.com', // 收件邮箱
        from: 'your-email@example.com', // 需与配置中的defaultFrom一致
        subject: `新表单提交：${formData.subject || '无主题'}`,
        text: `
          提交人姓名：${formData.name}
          联系邮箱：${formData.email}
          提交内容：${formData.message}
        `,
        // 如需HTML格式邮件，替换text为html字段
        // html: `<h3>新表单提交通知</h3><p>姓名：${formData.name}</p>`
      });

      ctx.body = {
        ...response.data,
        msg: '表单提交成功，通知邮件已发送'
      };
    } catch (err) {
      strapi.log.error('邮件发送失败:', err);
      ctx.body = {
        ...response.data,
        msg: '表单提交成功，但通知邮件发送失败'
      };
      ctx.status = 200; // 表单已保存，保持200状态码
    }

    return ctx.body;
  },
}));

三、前端提交表单的格式要求 #

前端需以POST请求发送至Strapi对应接口（如POST /api/contact-forms），请求体需符合Strapi v4的数据格式：

{
  "data": {
    "name": "张三",
    "email": "zhangsan@example.com",
    "subject": "产品咨询",
    "message": "想了解产品的具体功能"
  }
}

以Axios为例的前端代码示例：

axios.post('/api/contact-forms', {
  data: {
    name: '张三',
    email: 'zhangsan@example.com',
    subject: '产品咨询',
    message: '想了解产品的具体功能'
  }
})
.then(res => console.log(res.data))
.catch(err => console.error(err));

四、常见问题排查 #

• 检查SMTP配置参数：确认config/plugins.js中的SMTP主机、端口、账号密码正确，部分服务商需开启SMTP权限（如Gmail需使用应用专用密码）
• 配置内容类型权限：在Strapi后台设置→角色与权限中，给前端对应角色（如公共角色）开启目标内容类型的创建权限
• 字段名匹配：确保代码中formData.name等字段与内容类型中定义的字段名完全一致
• 邮件拦截检查：查看收件邮箱的垃圾邮件文件夹，部分SMTP服务商的邮件可能被标记为垃圾邮件

内容的提问来源于stack exchange，提问作者sridhar chary