Мой компонент 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)
  }
})})});
0
Ryan 5 Окт 2018 в 06:02

1 ответ

Лучший ответ

A. Если вы не загружаете файл, посмотрите код внизу о том, как загрузить файл с помощью REACT и Axios. посмотрите на обработчик onChange e.target.files [0], это объект файла, который будет отправлен на сервер. Вы не просто отправляете имя.

Б. Затем вам нужно получить этот файл на стороне сервера узла, выполнив примерно следующее: 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
1
Simon Cadieux 5 Окт 2018 в 05:18