0

我的反应组件看起来像：

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

1 回答 1

1

A. 您没有上传文件，请查看底部关于如何使用 REACT 和 Axios 上传文件的代码。查看 onChange 处理程序 e.target.files[0]，这是将发送到服务器的文件对象。你不只是发送一个名字。

B. 然后你需要在 Node 服务器端获取该文件，执行如下操作：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
于 2018-10-05T03:41:04.340 回答