如何使用react.js中的nodemailer附加文件

Question

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

Code:

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>
);

Server:

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

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

Answer 1

您不需要 axios 上传文件，只需将其 POST 为 FormData 使用 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: "[email protected]",
    to: "[email protected]",
    subject: "Subject",
    html: `<h1>Hello</h1>`,
    attachments: [{
      filename: req.file.originalname,
      content: req.file.buffer
    }]
  })
});

app.listen(4000);

如果您有其他中间件，您需要在此使用路由，它们可以作为数组传入：

import cors from 'cors';

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

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

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

在handleSubmit()中：

fd.append('myfile', 文件);

在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;