node.js - 错误：在 MERN 中上传表单数据时请求失败，状态码为 404

问题描述

我正在尝试在 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;

如何调试此错误或解决此错误？

标签： node.jsreactjsmongodbexpress

您在后端遗漏了一些东西，在这里很难找到错误，您需要对其进行调试。

或者我会更喜欢 npm 包

npm i express-fileupload

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

而不是使用使事情变得复杂的 multer 你可以使用这个包你只需要在这里导入它并像我在 server.js 中那样使用它作为中间件

在此之后，您几乎不需要编写几行代码

检查此 blog-controller.js 中的第 22 到 34 行

我希望你会发现这更容易

node.js - 错误：在 MERN 中上传表单数据时请求失败，状态码为 404

问题描述

解决方案

推荐阅读