Question

我的React组件看起来像：

import React from "react";
import { Form, FormGroup, FormText, Input, Label, Button } from "reactstrap";
import axios from "axios";

import ThankYouModal from "./ThankYouModal";
import Header from "./Header";
import Footer from "./Footer";

export default class Contact extends React.Component {
constructor(props) {
super(props);

this.state = {
  name: "",
  email: "",
  message: "",
  file: "",
  submitted: false,
}

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.closeThankYouModal = this.closeThankYouModal.bind(this);
}

handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value })
}

 async handleSubmit(e) {
e.preventDefault();
const { name, email, message, file } = this.state;
this.setState({ submitted: true, message: "" });
e.target.message = "";

const formPDF = await axios.post("/api/formPDF", {
  name,
  email,
  message,
  file
})
}

然后在我的渲染器中是：

          <FormGroup>
        <Label for="file">File</Label>
        <Input
          type="file"
          name="file"
          value={this.state.file}
          onChange={this.handleChange} />
        <FormText color="muted">
          File must be sent as a PDF.
        </FormText>
      </FormGroup>

然后我将nodemailer设置为在“ / api / formPDF”上发布，我尝试使用req.body.file来提取文件名，但是Javascript会执行其工作并将路径转换为“ C：\ fakepath \ MyPDFFile” .pdf”，并表示无法在该位置找到文件。

我知道我的电子邮件设置有效，因为我可以让它成功发送没有附件的电子邮件，只是在获取正确的路径名方面遇到困难。我曾考虑过使用fs通过节点流式传输数据，但我对如何分辨fs的外观以及文件名将有些不知所措。预先感谢。

编辑：这是我的nodemailer设置：

app.post("/api/formPDF", (req, res) => {nodemailer.createTestAccount((err, account) => {
const attach = fs.createReadStream("path", req.body.file);

const htmlEmail = `
  <h3>Contact Details</h3>
  <ul>
    <li>Name: ${req.body.name}</li>
    <li>Email: ${req.body.email}</li>
  </ul>
  <h3>Message</h3>
  <p>${req.body.message}</p>
`

let transporter = nodemailer.createTransport({
  name: *hidden*,
  host: *hidden*,
  port: 465,
  secure: true,
  auth: {
    user: *hidden*,
    pass: *hidden*
  }
})

let mailOptions = {
  from: *hidden*,
  to: *hidden*,
  replyTo: req.body.email,
  subject: "New Message",
  text: req.body.message,
  html: htmlEmail,
  attachments: [
    {
     path: attach
    }
 ]
};

transporter.sendMail(mailOptions, (err, info) => {
  if (err) {
    return console.log(err)
  }
})})});

Answer 1

A。您没有上传文件，请查看底部的代码，了解如何使用REACT和Axios上传文件。看一下onChange处理程序e.target.files [0]，这是将被发送到服务器的文件对象。您不仅要发送姓名。

B。然后，您需要在节点服务器端上执行以下操作来获取该文件：https://gist.github.com/paambaati/db2df71d80f20c10857d

C。然后将文件的路径保存在服务器端，然后将其上传或保存。然后，将其与NodeMailer一起使用。

import React from 'react'
import axios, { post } from 'axios';

class SimpleReactFileUpload extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      file:null
    }
    this.onFormSubmit = this.onFormSubmit.bind(this)
    this.onChange = this.onChange.bind(this)
    this.fileUpload = this.fileUpload.bind(this)
  }
  onFormSubmit(e){
    e.preventDefault() // Stop form submit
    this.fileUpload(this.state.file).then((response)=>{
      console.log(response.data);
    })
  }
  onChange(e) {
    this.setState({file:e.target.files[0]})
  }
  fileUpload(file){
    const url = 'http://example.com/file-upload';
    const formData = new FormData();
    formData.append('file',file)
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }
    return  post(url, formData,config)
  }

  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <h1>File Upload</h1>
        <input type="file" onChange={this.onChange} />
        <button type="submit">Upload</button>
      </form>
   )
  }
}



export default SimpleReactFileUpload

使用Nodemailer发送在React App中指定的PDF

1 个答案: