Question

我正在构建工作申请表，并希望添加附件，以便用户最好以pdf格式上传简历文件。我想用reactjs，nodejs，express和nodemailer实现此目的，因为我已经在使用它。也许还要加水泡器吗？

我能够将其他数据（例如姓名，电子邮件，电话号码，工作经历等）发送到电子邮件地址帐户，但对如何将上传的文件从客户端发送到服务器以及如何使用nodemailer破坏附件感到困惑。我能够将其发送到服务器，但不能发送到电子邮件地址帐户。

我希望用户上传的文件以pdf格式发送到电子邮件地址帐户。

我尝试从https://programmingwithmosh.com/javascript/react-file-upload-proper-server-side-nodejs-easy/添加multer代码，但在控制台中不断收到此错误
POST http://localhost:3000/ 404 (Not Found).

这是我的前端代码

class Form extends Component {
  constructor() {
    super();
    this.state = {
      selectedFile: null
    };
    this.onChangeHandler = this.onChangeHandler.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  onChangeHandler = e => {
    this.setState({
      selectedFile: e.target.files[0]
    });
  };

  async handleSubmit(e) {
    e.preventDefault();
    console.log("submitted");
      selectedFile
    } = this.state;

    const dataFile = new FormData();
    dataFile.append("file", selectedFile);

    const form = await axios
      .post("/api/form", {
        dataFile
      })
      .then(res => {
        // then print response status
        console.log(res.statusText);
      })
      .catch(err => console.log(err));
  }

  render() {
    return (

       <form className="careers__form" onSubmit={this.handleSubmit}>

        {/***********************************************************/}
        {/********************** Single File Upload *****************/}
        {/***********************************************************/}
         <div>
          <legend>Resume</legend>
           <input
             type="file"
             name="myFile"
             onChange={this.onChangeHandler}
           />
        </div>

        {/***********************************************************/}
        {/********************** Button Submit **********************/}
        {/***********************************************************/}
        <div>
          <button className="submit application">Send Application</button>
        </div>
      </form>

    );
  }
}

export default withRouter(Form);

服务器代码

const express = require("express");
const bodyParser = require("body-parser");
const multer = require("multer");
const cors = require("cors");
const nodemailer = require("nodemailer");
const creds = require("./config/config");
const app = express();
const fs = require("fs");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, "public");
  },
  filename: function(req, file, cb) {
    cb(null, Date.now() + "-" + file.originalname);
  }
});
var upload = multer({ storage: storage }).single("myFile");


app.post("/api/form", function(req, res) {

  const output = `<p>Upload file: ${req.body.dataFile} </p>`;
  console.log(output);

  // create reusable transporter object using the default SMTP transport
  let transporter = nodemailer.createTransport({
    service: "gmail",
    port: 587,
    secure: false, // true for 465, false for other ports
    requireTLS: true,
    auth: {
      user: creds.USER, // generated ethereal user
      pass: creds.PASS // generated ethereal password
    },
    tls: {
      rejectUnauthorized: false
    }
  });

  // setup email data with unicode symbols
  let mailOptions = {
    from: '[Sender Address]', // sender address
    to: "[Receiver Address]", // list of receivers
    subject: "[Subject line]", // Subject line
    text: "[text body]", // plain text body
    html: output, // html body
    attachments: [
      {
        filename: upload.filename,
        path: req.file.path
      }
    ]

  };

  // send mail with defined transport object
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return console.log(error);
    }
    console.log("Message sent: %s", info.messageId);
    console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));

    // res.render('main', {msg:'Thank you, your email has been sent successfully!'});
  });
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server listening to port ${PORT}`);
});

Answer 1

在前端将url路径设置为“ http：// localhost：3001 / api / form”

const form = await axios
  .post("http://localhost:3001/api/form", {
    dataFile
  })

在server.js中，将附件路径设置为

发送用户上传的附件文件以发送到电子邮件地址帐户

1 个答案: