Блог

Я создаю приложение для книжного магазина, используя MERN. Но когда я пытаюсь загрузить новую книгу, она возвращает сообщение http://localhost:5000/books/add 400 (плохой запрос)». Не уверен, почему это происходит, в этом случае книга не загружается, но изображение обложки хранится в каталоге / uploads. Но данные не передаются мангусту.

Использование multer для загрузки bookcover и реагирования с помощью перехватов. Пожалуйста, помогите, вот код

backendroutesBooks.js

 const router = require("express").Router();
let Book = require("../models/BookModel");
const multer = require('multer');

const storage = multer.diskStorage({
  destination:function(req, file, cb){
    cb(null, './uploads/');
  },
  filename:function(req, file, cb){
    cb(null, file.originalname);
  }
});

const fileFIlter = (req, file,cb) => {
  if(file.mimetype === 'image/jpeg' || file.mimetype === 'image/png'){
    cb(null, true);
  }
  else{
    cb(null, false);
  }
}

const upload = multer({storage:storage, limits:{
  fileSize: 1024 * 1024 * 2
}}); 

router.route("/").get((req, res) => {
  Book.find()
    .then((books) => res.json(books))
    .catch((err) => res.status(400).json("Error: "   err));
});

router.route("/add").post(upload.single('cover'), (req, res) => {
  console.log(req.file);
  const name = req.body.name;
  const author = req.body.author;
  const price = req.body.price;
  const summary = req.body.summary;
  const cover = req.file.path;

  const newBook = new Book({
    name,
    author,
    price,
    summary,
    cover
  });

  newBook
    .save()
    .then(() => res.json("Book Added!"))
    .catch((err) => res.status(400).json("Error: "   err));
});

router.route("/:id").get((req, res) => {
  Book.findById(req.params.id)
    .then((book) => res.json(book))
    .catch((err) => res.status(400).json("Error: "   err));
});

router.route("/:id").delete((req, res) => {
  Book.findByIdAndDelete(req.params.id)
    .then(() => res.json("Book Deleted!"))
    .catch((err) => res.status(400).json("Error: "   err));
});

router.route("/update/:id").post(upload.single('cover'),(req, res) => {
  Book.findById(req.params.id)
    .then((book) => {
      book.name = req.body.name;
      book.author = req.body.author;
      book.price = req.body.price;
      book.summary = req.body.summary;
      book.cover = req.file.path;

      book
        .save()
        .then(() => res.json("Book Updated!"))
        .catch((err) => res.status(400).json("Error: "   err));
    })
    .catch((err) => res.status(400).json("Error: "   err));
});

module.exports = router;

 

и frontendsrcpagesAddBookPage.js

 
import {useState} from "react";
import axios from "axios";

const AddBookPage = () => {
    const [Book, SetBook] = useState({
        name:"",
        author:"",
        price:"",
        summary:"",
        cover:null
    });

      // Handel Input Change
      const handleChange = (e) => {
        SetBook({...Book,
          [e.target.name]: e.target.value,
        });
      };

      // Handel Input Change
      const handleFileChange = (e) => {
        SetBook({...Book,
          [e.target.name]: e.target.files[0],
        });
        console.log(Book.cover)
      };

      // Update book to server
      const handleSubmit = (e) => {
        e.preventDefault();
        console.log(Book.cover);
        const formData = new FormData();
        formData.append(
          'cover',
          Book.cover
          );
        const config = {
            headers: {
                'content-type': 'multipart/form-data'
            }
        };
        const book = {
          name:Book.name,
          author:Book.author,
          price:Book.price,
          summary:Book.summary,
          cover:Book.cover.name
        };
    
        axios
          .post(
            `http://localhost:5000/books/add`, formData, config, book
          )
          .then((res) => console.log(res.data))
          .catch((err) => console.log(err));

          console.log(book);

      };

    return (
        <main>
            <div className="book_page book_edit_page">
                <div className="book_edit_warp">
                <form onSubmit={handleSubmit}>

              <div className="form-group">
                <label htmlFor="name">Name</label>
                <input
                  type="text"
                  className="form-control"
                  id="name"
                  name="name"
                  required
                  onChange={handleChange}
                  value={Book.name}
                />
              </div>

              <div className="form-group">
                <label htmlFor="author">Author</label>
                <input
                  type="text"
                  className="form-control"
                  id="author"
                  name="author"
                  required
                  onChange={handleChange}
                  value={Book.author}
                />
              </div>

              <div className="form-group">
                <label htmlFor="price">Price</label>
                <input
                  type="text"
                  className="form-control"
                  id="price"
                  name="price"
                  required
                  onChange={handleChange}
                  value={Book.price}
                />
              </div>

              <div className="form-group">
                <label htmlFor="summary">Summary</label>
                <textarea
                  type="text"
                  className="form-control"
                  id="summary"
                  name="summary"
                  required
                  onChange={handleChange}
                  value={Book.summary}
                />
              </div>

              <div className="form-group">
                <label htmlFor="cover">Book Cover</label>
                <input
                  type="file"
                  className="form-control"
                  id="cover"
                  name="cover"
                  required
                  onChange={handleFileChange}
                />
              </div>


              <button type="submit" className="btn btn-primary">
                Update
              </button>
            </form>
                </div>
            </div>
        </main>
    )
}

export default AddBookPage;