Блог

Я пытаюсь вставить данные формы вместе с одним изображением в стек MERN.

Проблема в том, что изображение успешно загружено в мою папку, но данные формы не вставляются в мою базу данных mongodb. путь к изображению также не создается в mongodb. Я использую multer для этого.

Ошибка, которую я получил в консоли браузера

 POSThttp://localhost:3000/teacher
[HTTP/1.1 400 Bad Request 22ms]

Error: Request failed with status code 400
    createError createError.js:16
    settle settle.js:17
    onloadend xhr.js:66
    dispatchXhrRequest xhr.js:80
    xhrAdapter xhr.js:15
    dispatchRequest dispatchRequest.js:58
    request Axios.js:108
    method Axios.js:140
    wrap bind.js:9
    handleSubmit Register.js:19
    React 14
    unstable_runWithPriority scheduler.development.js:468
    React 15
    js index.js:7
    js main.chunk.js:753
    Webpack 7
 

(серверная часть) Маршрутизатор—>Auth.js

 const mongoose = require("mongoose")
const express = require("express")
const router = express()
require("../db/conn")
const User = require("../model/userSchema")
const Teacher = require("../model/userSchemaTeacher")
const multer = require('multer');
const { v4: uuidv4 } = require('uuid');
let path = require('path');

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, 'images','pdf');
    },
    filename: function(req, file, cb) {   
        cb(null, uuidv4()   '-'   Date.now()   path.extname(file.originalname));
    }
});


const fileFilter = (req, file, cb) => {
    const allowedFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];
    if(allowedFileTypes.includes(file.mimetype)) {
        cb(null, true);
    } else {
        cb(null, false);
    }
}

let upload = multer({ storage, fileFilter });

router.route('/teacher').post(upload.single('photo'), (req, res) => {
    const school = req.body.school;
    const photo = req.body.photo;
    const address = req.file.address;

    const newUserData = {
        school,
        photo,
        address
    }

    const newUser = new User(newUserData);

    newUser.save()
           .then(() => res.json('User Added'))
           .catch(err => res.status(400).json('Error: '   err));
});


module.exports = router
 

(интерфейс) register.js

 import React, { useState } from "react";
import axios from "axios";
const FormData = require("form-data")

const Register = () => {
    const [newUser, setNewUser] = useState({
        school: "",
        address: "",
        photo: "",
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append("school", newUser.school);
        formData.append("photo", newUser.photo);
        formData.append("address", newUser.address);

        axios
            .post("http://localhost:3000/teacher", formData)
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });
    };

    const handleChange = (e) => {
        setNewUser({ ...newUser, [e.target.name]: e.target.value });
    };

    const handlePhoto = (e) => {
        setNewUser({ ...newUser, photo: e.target.files[0] });
    };
    return (
        <>
            <div className="container main">
                <div className="row">
                    <div className="col-sm-6 col-md-6 col-lg-6">
                        <form onSubmit={handleSubmit} encType="multipart/form-data">
                            <div class="mb-3">
                                <label for="exampleInputPassword1" class="form-label">
                                    Your school
                                </label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="exampleInputPassword1"
                                    id="school"
                                    name="school"
                                    value={newUser.school}
                                    onChange={handleChange}
                                />
                            </div>

                            <div class="input-group mb-3">
                                <input
                                    type="file"
                                    accept=".png, .jpg, .jpeg"
                                    
                                    name="photo"
                                    onChange={handlePhoto} type="file" class="form-control" id="inputGroupFile02" />
                            </div>

                            <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label">
                                    your address
                                </label>
                                <input
                                    type="text"
                                    id="address"
                                    name="address"
                                    value={newUser.address}
                                    onChange={handleChange}
                                    class="form-control"
                                    aria-describedby="emailHelp"
                                />

                                <div id="emailHelp" class="form-text">
                                    We'll never share your email with anyone else.
                                </div>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" />
                                <label class="form-check-label" for="exampleCheck1">
                                    Check me out
                                </label>
                            </div>
                            <button
                                value="register"
                                
                                type="submit"
                                class="btn btn-primary"
                            >
                                Submit
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </>
    );
};

export default Register;
 

Как отладить эту ошибку или устранить ее?

Вам чего-то не хватает в вашем бэкэнде, здесь трудно найти ошибку, ну, вам нужно ее исправить.

или я предпочту пакет npm

 npm i express-fileupload

app.post('/upload', function(req, res) {
  console.log(req.files.foo); // the uploaded file object
});
 

вместо использования мультера, который усложняет ситуацию, вы можете использовать этот пакет
вам просто нужно импортировать его сюда и использовать в качестве промежуточного программного обеспечения, как я сделал в server.js

после этого вам нужно написать всего несколько строк кода

проверьте строки с 22 по 34 в этом blog-controller.js

Я надеюсь, что вам будет намного проще