Блог

Я новичок в кодировании серверных материалов. То, что я пытаюсь сделать, это попросить клиента заполнить форму электронной почты, загрузить вложение с предварительным просмотром и отправить указанное изображение в виде вложения на мою электронную почту, чтобы я мог настроить изображение для использования на сайте. Все настраивается в React и Node.js . Я могу отправить форму электронной почты; Я даже могу отправить вложение с электронной почтой. Проблема в том, что вложение пустое. Я пытаюсь открыть вложение на новой вкладке, но оно зависает и ничего не делает. Если я пытаюсь загрузить вложение, оно зависает, а затем сообщает об ошибке сервера.

Я рыскал по Интернету, пробуя так много разных вещей в течение нескольких дней, пытаясь заставить это работать. Просматриваю учебные пособия, другие вопросы и предложения, просматриваю сообщения в блогах, и, похоже, ничего не работает. Я знаю, что есть способ сделать это, но я понятия не имею, какой. Я не нашел ничего, что работает. Может, кто-нибудь просветит меня, что я делаю не так, и как на самом деле отправить вложение изображения? Я оставил свой код здесь, чтобы люди могли ознакомиться с ним. Спасибо.

ИНТЕРФЕЙС

 import React, { Component } from "react";
import axios from "axios";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: "",
      message: "",
      file: null,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFileChange = this.handleFileChange.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

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

  handleFileChange = (e) => {
    const [file] = e.target.files;
    if (file) {
      this.setState({
        file: URL.createObjectURL(e.target.files[0]),
      });
      console.log(file);
    }
  };

  handleReset = (e) => {
    this.setState({
      [e.target.name]: "",
      [e.target.email]: "",
      [e.target.message]: "",
      [e.target.file]: null,
    });
  };

  async handleSubmit(e) {
    e.preventDefault();

    const { name, email, message, file } = this.state;

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

    if (file) {
      this.setState({
        file: URL.revokeObjectURL(e.target.files[0]),
      });
    }
  }

  render() {
    return (
      <form
        onSubmit={this.handleSubmit}
        style={{ width: "200px", padding: "20px" }}
      >
        <label htmlFor="name">Name:</label>
        <input type="text" name="name" onChange={this.handleChange} />

        <label htmlFor="email">Email:</label>
        <input type="email" name="email" onChange={this.handleChange} />

        <label htmlFor="message">Message:</label>
        <input type="textarea" name="message" onChange={this.handleChange} />

        <label htmlFor="file">File:</label>
        <input
          type="file"
          name="file"
          accept="image/jpeg, jpg"
          onChange={this.handleFileChange}
          multiple={false}
        />

        <img src={this.state.file} alt="img" />

        <input type="submit" />
      </form>
    );
  }
}

export default App;
  

СЕРВЕРНАЯ ЧАСТЬ

 const express = require("express");
const bodyParser = require("body-parser");
const nodemailer = require("nodemailer");
const app = express();
const cors = require("cors");
const fs = require("fs");

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

app.post("/api/form", (req, res) => {
  nodemailer.createTestAccount((err, account) => {
    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({
      host: "********",
      port: ***,
      auth: {
        user: "********",
        pass: "********",
      },
    });

    let mailOptions = {
      from: "test@test.com",
      to: "testReceive@test.com",
      replyTo: "test@test.com",
      subject: "Test Message",
      text: req.body.message,
      html: htmlEmail,
      attachments: [
        {
          filename: "AdvertImage.jpg",
          content: req.body.file,
          contentType: "image/jpg",
        },
      ],
    };

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

      console.log("Message sent: %s", info.message);
      console.log("Message URL: %s", nodemailer.getTestMessageUrl(info));
    });
  });
});

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});
  

Спасибо!