Node.js 服务器发送包含多个文本输入的输入文件时出错

令人沮丧的是，在数百个教程中，没有一个教程可以处理文件输入和多个文本输入，并向服务器发送请求。我正试图在axios的帮助下向服务器发送post请求，所有其他输入都被很好地解析，但是当我向其中添加文件时，它给出了500个错误，并显示以下消息“TypeError:无法读取未定义的属性‘image’” 这是文件 Post.js

    const express=require('express');
    const app=express();
    const mongoose=require('./dbConfig');
    const author=require('./schemas/AuthorSchema');
    const post=require('./schemas/PostSchema');
    const multer=require('multer');
    var path = require('path')
    app.use(express.json())
    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Methods", "GET,POST,HEAD,OPTIONS,PUT,PATCH,DELETE");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();
    });
    const storage = multer.diskStorage({
        destination: (req, file, cb) => {
          cb(null, '../public/uploads/images')
        },
        filename: (req, file, cb) => {
          cb(null, file.fieldname + '-' + Date.now()+ path.extname(file.originalname))
        }
    });
    const upload=multer({storage:storage});
    
    
    app.listen(3000,()=>{
        console.log("Server started at 3000")
    });
    app.get('/post',(req,res)=>{
        post.find({})
        .then(post => res.send(post))
        .catch((error) => console.log(error))
    })
    app.get('/post/:id',(req,res)=>{
        post.find({'_authorID':req.params.id})
        .then(post => res.send(post))
        .catch((error) => console.log(error))
    })
    app.post('/post/new',upload.single('image'),(req,res)=>{
        
        new post({'title':req.body.title,'content':req.body.content,'slug':req.body.slug,'_authorID':req.body._authorID,'date':Date.now,'image':'./public/uploads/images/'+req.file.image})
        .save()
        
        .then((post) => console.log(post))
        .catch((error) => console.log(error))
        console.log(post._authorID)
        res.send("Post Added Successfully")
    })
    app.post('/author',upload.single('photo'),(req,res)=>{
        new author({'name':req.body.name,'photo':'public/uploads/images/'+req.file.filename,'bio':req.body.bio,'username':req.body.username,'password':req.body.password,'email':req.body.email})
        .save()
        .then((author) => console.log(author))
        .catch((error) => console.log(error))
        res.send("Post Added Successfully")
    })
    app.delete('/post/delete/:id',(req,res)=>{
        console.log(req.params.id)
        post.findByIdAndDelete(req.params.id,function(err,docs){
            if(err){
            console.log(err);
            }
            else{
                console.log("Deleted"+docs);
                res.send("Deleted Successfully");
            }
        }  
    )})
    app.patch('/post/update/:id',(req,res)=>{
        post.findByIdAndUpdate(req.params.id,{'title':req.body.title,'content':req.body.content,'slug':req.body.slug,'_author':req.body._author},function(err,docs){
            if(err){
                console.log(err);
            }
            else{
                console.log("Updated Successfully");
            }
        })
    })

import React，{Component，useState}来自'React'；
导入“/post.css”；
从“axios”导入axios；
类post扩展组件{
建造师（道具）{
超级（道具）
这个州={
标题：空，
内容：空，
slug:null，
_authorID:null，
}
}
postHandler=（事件）=>{
this.setState（{[event.target.name]：event.target.value}）
}
imageHandler=（事件）=>{
this.setState（{[event.target.files[0]]：event.target.value}）
}
submitHandler=（事件）=>{
var req=新表单数据（）
请求追加（'title'，this.state.title）
请求追加（'content'，this.state.content）
请求追加（'slug'，this.state.slug）
请求附加（“authorID”，此.state.\u authorID）
req.append（'image'，this.state.image.files[0]）
控制台日志（“e”）
event.preventDefault（）
axios(
{url:“http://localhost:3000/post/new",
方法：'post'，
数据：req}）；
}
render（）{
const{title，content，slug，_authorID，image}=this.state；
返回(
标题
内容
鼻涕虫
作者
提交
);}
}
导出默认帖子

App.js

    const express=require('express');
    const app=express();
    const mongoose=require('./dbConfig');
    const author=require('./schemas/AuthorSchema');
    const post=require('./schemas/PostSchema');
    const multer=require('multer');
    var path = require('path')
    app.use(express.json())
    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Methods", "GET,POST,HEAD,OPTIONS,PUT,PATCH,DELETE");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();
    });
    const storage = multer.diskStorage({
        destination: (req, file, cb) => {
          cb(null, '../public/uploads/images')
        },
        filename: (req, file, cb) => {
          cb(null, file.fieldname + '-' + Date.now()+ path.extname(file.originalname))
        }
    });
    const upload=multer({storage:storage});
    
    
    app.listen(3000,()=>{
        console.log("Server started at 3000")
    });
    app.get('/post',(req,res)=>{
        post.find({})
        .then(post => res.send(post))
        .catch((error) => console.log(error))
    })
    app.get('/post/:id',(req,res)=>{
        post.find({'_authorID':req.params.id})
        .then(post => res.send(post))
        .catch((error) => console.log(error))
    })
    app.post('/post/new',upload.single('image'),(req,res)=>{
        
        new post({'title':req.body.title,'content':req.body.content,'slug':req.body.slug,'_authorID':req.body._authorID,'date':Date.now,'image':'./public/uploads/images/'+req.file.image})
        .save()
        
        .then((post) => console.log(post))
        .catch((error) => console.log(error))
        console.log(post._authorID)
        res.send("Post Added Successfully")
    })
    app.post('/author',upload.single('photo'),(req,res)=>{
        new author({'name':req.body.name,'photo':'public/uploads/images/'+req.file.filename,'bio':req.body.bio,'username':req.body.username,'password':req.body.password,'email':req.body.email})
        .save()
        .then((author) => console.log(author))
        .catch((error) => console.log(error))
        res.send("Post Added Successfully")
    })
    app.delete('/post/delete/:id',(req,res)=>{
        console.log(req.params.id)
        post.findByIdAndDelete(req.params.id,function(err,docs){
            if(err){
            console.log(err);
            }
            else{
                console.log("Deleted"+docs);
                res.send("Deleted Successfully");
            }
        }  
    )})
    app.patch('/post/update/:id',(req,res)=>{
        post.findByIdAndUpdate(req.params.id,{'title':req.body.title,'content':req.body.content,'slug':req.body.slug,'_author':req.body._author},function(err,docs){
            if(err){
                console.log(err);
            }
            else{
                console.log("Updated Successfully");
            }
        })
    })

---

我想你的问题在这里

这个

       imageHandler=(event)=>{
           this.setState({[event.target.files[0]]: event.target.value})
       }

应该是

       imageHandler=(event)=>{
           this.setState({image: event.target.value})
       }

您正在尝试引用未设置的

此.state.image

req.append('image',this.state.image.files[0])

---

我认为@MarikIshtar表示堆栈跟踪，因为代码中有许多位置引用了

image

。我在标题“TypeError:Cannot read property'image'of undefined”中写了它，我们需要在没有它的情况下对跟踪进行堆栈，我们无法判断错误引用的是哪个图像。见：