React应用如何读取并解析接收邮件的txt附件内容？

不要在前端 React 代码里直连邮箱服务，这是严重安全隐患：邮箱账号、密码会直接打包进前端静态资源，任何人都能窃取权限。正确架构是 React 只做展示层，单独写 Node 后端服务处理邮件连接、拉取、解析逻辑，前端通过接口拿结构化好的数据渲染即可。

一、依赖选型（均为长期维护的稳定 Node 模块，无适配问题） #

• 邮件连接拉取：用imap，是 Node 生态下实现 IMAP 协议的标准模块，支持筛选邮件、监听新邮件、只读访问等能力，不需要手写底层协议逻辑
• 邮件格式解析：用mailparser，专门处理 MIME 格式的邮件内容，自动拆分邮件头、正文、附件，不需要手动处理 MIME 边界分割逻辑
• txt 附件提取：不需要额外依赖，mailparser返回的附件内容是 Buffer 格式，直接转 utf8 字符串即可拿到文本内容

二、核心实现步骤 #

1. Node 后端层（核心处理逻辑） #

先安装依赖：

npm install imap mailparser

核心拉取、解析代码示例（可以搭配 Express/Koa 暴露接口给前端调用）：

const Imap = require('imap');
const { simpleParser } = require('mailparser');

// 邮箱配置，企业邮箱需要对应替换IMAP服务地址、端口
const imapConfig = {
  user: '专门接收服务器状态邮件的邮箱账号',
  password: '邮箱IMAP授权码（注意不是网页登录密码，大部分邮箱需要手动开启IMAP服务后获取授权码）',
  host: 'imap.对应邮箱服务商域名',
  port: 993,
  tls: true,
  tlsOptions: { rejectUnauthorized: false }
};

// 拉取未读邮件、解析txt附件的核心方法
async function getServerStatusFromMails() {
  return new Promise((resolve, reject) => {
    const imap = new Imap(imapConfig);

    imap.once('ready', () => {
      // 只读模式打开收件箱，不会修改原邮件状态
      imap.openBox('INBOX', true, (openErr) => {
        if (openErr) return reject(openErr);
        // 筛选规则：可以自定义，比如只拉取24小时内的未读邮件、指定发件人的邮件
        imap.search(['UNSEEN', ['SINCE', new Date(Date.now() - 24*60*60*1000)]], (searchErr, mailIds) => {
          if (searchErr || !mailIds.length) {
            imap.end();
            return resolve([]);
          }
          // 拉取邮件完整内容，拉取后标记为已读避免重复处理
          const mailFetcher = imap.fetch(mailIds, { bodies: '', markSeen: true });
          const parsedResult = [];

          mailFetcher.on('message', (msg) => {
            msg.on('body', (stream) => {
              simpleParser(stream, (parseErr, mailData) => {
                if (parseErr) return;
                // 过滤出.txt格式的附件
                const txtFiles = mailData.attachments.filter(att => 
                  att.contentType === 'text/plain' && att.filename?.endsWith('.txt')
                );
                // 提取附件文本内容
                txtFiles.forEach(file => {
                  parsedResult.push({
                    filename: file.filename,
                    content: file.content.toString('utf8'),
                    sender: mailData.from.text,
                    receiveTime: mailData.date
                  })
                })
              })
            })
          })

          mailFetcher.once('end', () => {
            imap.end();
            resolve(parsedResult);
          })
        })
      })
    })

    imap.once('error', reject);
    imap.connect();
  })
}

// 示例：用express暴露接口，前端直接调用即可
// app.get('/api/server-status', async (req, res) => {
//   const data = await getServerStatusFromMails();
//   res.json(data);
// })

如果需要实时获取新邮件，不需要轮询接口，可以直接用imap模块的mail事件监听收件箱新邮件推送，性能更好。

2. React 前端层 #

前端不需要处理任何邮件相关逻辑，直接调用后端接口拿解析好的数据渲染即可，示例组件：

import { useEffect, useState } from 'react';

export default function ServerStatusPanel() {
  const [statusData, setStatusData] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/server-status');
      const data = await res.json();
      setStatusData(data);
    } catch (err) {
      console.error('服务器状态加载失败', err);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    fetchData();
    // 配置定时刷新，比如每10分钟拉取一次最新数据
    const refreshTimer = setInterval(fetchData, 10*60*1000);
    return () => clearInterval(refreshTimer);
  }, [])

  return (
    <div className="status-panel">
      <h2>每日服务器状态核查</h2>
      {loading && <div className="loading">数据加载中...</div>}
      {statusData.map((item, idx) => (
        <div key={idx} className="status-card">
          <div className="card-meta">
            <span>发件人：{item.sender}</span>
            <span>接收时间：{new Date(item.receiveTime).toLocaleString()}</span>
            <span>附件：{item.filename}</span>
          </div>
          <pre className="status-content">{item.content}</pre>
        </div>
      ))}
    </div>
  )
}

三、常见踩坑点 #

• 绝大多数公共邮箱、企业邮箱默认关闭IMAP服务，需要先去邮箱后台手动开启IMAP服务，获取专用授权码，用网页登录密码会连接失败
• 如果接收的txt附件是固定格式（比如包含固定的CPU、内存、磁盘使用率字段），可以直接在后端解析文本时做结构化处理，前端不需要二次处理文本，渲染更方便
• 不要为了省事把邮件解析逻辑放在前端，除了密钥泄露问题，浏览器跨域限制也会导致无法直接连接IMAP服务（IMAP不是HTTP协议）

内容的提问来源于stack exchange，提问作者Bill Hennessey