如何在 React.js 中使用 Nodemailer 附加文件

Question

我正在使用 React 和 Nodemailer 从用户输入表单发送电子邮件，用户应该能够通过表单附加文件（例如 PDF），表单的内容将作为电子邮件发送使用 Nodemailer。我的问题是不知道如何将文件附加到电子邮件中。 Here 是可通过 Nodemailer 使用的属性列表和示例。我可以从通过文件输入到 event.target.files 的对象中提取哪些属性以用于附加到电子邮件，例如，我可以获取输入文件的路径吗？

代码：

const [file, setFile] = useState(null);

const handleSubmit = async(e) => {
e.preventDefault();

try {
  await axios.post("http://localhost:4000/send_form", { file });
}
catch (error) {
  console.log(error);
}
}

return (
  <form onSubmit={handleSubmit}>
    <input
      type="file"
      onChange={(e) => setFile(e.target.files[0])}
      required/>
    <button type="submit">Send</button>
  </form>
);

服务器：

app.post("/send_form", cors(), async (req, res) => {
  let { file } = req.body;

  await transport.sendMail({
    from: "from@sender.com",
    to: "to@receiver.com",
    subject: "Subject",
    html: `<h1>Hello</h1>`,
    attachments: [{
      filename: "",
      path: ""
    }]
  })
});

Answer 1

您不需要 axios 来上传文件，只需 POST FormData with the Fetch API。

async function handleSubmit(event) {
  event.preventDefault();

  let fd = new FormData();
  fd.append('myfile', file);

  fetch('http://localhost:4000/upload', {
    method: 'POST', body: fd
  }).catch(err => {
    console.error(err);
  });
}

如果您有其他数据要与图像一起提交，也可以将其附加到 FormData 对象。

fd.append('name', 'Joe');
fd.append('age', 40);
// etc...

或者，您可以简单地捕获任何 HTMLFormElement 中的所有字段。只需确保将 enctype 属性设置为 multipart/form-data.

let form = document.querySelector('#your-form');
let fd = new FormData(form);

然后，您可以在服务器上使用 multer 中间件将文件缓冲区流式传输到 nodemailer 附件：

import express from 'express';
import multer from 'multer';
import transport from './your_app.js'

const app = express();

const upload = multer({
  storage: multer.memoryStorage()
});

app.post('/upload', upload.single('myfile'), (req, res) => {
  transport.sendMail({
    from: "from@sender.com",
    to: "to@receiver.com",
    subject: "Subject",
    html: `<h1>Hello</h1>`,
    attachments: [{
      filename: req.file.originalname,
      content: req.file.buffer
    }]
  })
});

app.listen(4000);

如果你有其他middleware需要在这条路线上使用，可以将它们作为数组传入：

import cors from 'cors';

let middleware = [
  cors(),
  upload.single('myfile')
];

app.post('/upload', middleware, handler);

请注意，以下两个语句中使用的密钥必须匹配。这个key对应文件输入的name属性

In handleSubmit() :
fd.append('myfile', file);
In app.post() :
upload.single('myfile')

如果需要，Multer 还允许上传多个文件。您可以使用 multiple 属性从单个输入捕获多个文件：

upload.array('myfile', 3)

或者您可以使用多个文件输入：

upload.fields([
  { name: 'myfile', maxCount: 1 },
  { name: 'another-file', maxCount: 8 }
])

如果这样做，您将需要从 req.files 属性而不是单数 req.file.

访问上传的文件数据

您的表单数据的其余部分将在 req.body 对象中可用：

req.body.name == 'Joe'
req.body.age == 40;

Answer 2

My issue comes with not knowing how to attach the file to the email.

所以您不知道如何添加文件上传代码？按照本教程进行操作，然后您可以通过 http POST 以某种方式将此数据发送到您的服务器。

https://www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/

如何在 React.js 中使用 Nodemailer 附加文件

How to attach file using Nodemailer in React.js

javascript

email

attachment

node.js

reactjs

如何在 React.js 中使用 Nodemailer 附加文​​件

How to attach file using Nodemailer in React.js

javascript

email

attachment

node.js

reactjs

如何在 React.js 中使用 Nodemailer 附加文件