Node.js TypeError:无法读取属性'；路径'；使用multer reactjs和axios时未定义的

每当我试图从我的表单中发送

petImage

数据时，我都会收到

TypeError:无法读取未定义的属性“path”

错误日志中的第一行是

/mnt/c/Users/Josh/Desktop/pet_app/server/index.js:58:28

我很确定我的错误是客户端的

axios

，因为我用postman测试了post-route端点，它将

petImage

发送到数据库

这是密码

反应成分：

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

export default class NewPet extends Component {
    constructor(props) {
        super(props);

        this.onChangeSpecies = this.onChangeSpecies.bind(this);
        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeAge = this.onChangeAge.bind(this);
        this.onChangeImage = this.onChangeImage.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            species: '',
            name: '',
            age: '',
            petImage: ''
        }
    }

    onChangeSpecies(e) {
        this.setState({
            species: e.target.value
        });
    }

    onChangeName(e) {
        this.setState({
            name: e.target.value
        });
    }

    onChangeAge(e) {
        this.setState({
            age: e.target.value
        });
    }

    onChangeImage(e) {
        this.setState({
            petImage: e.target.files[0]
        });
    }

    onSubmit(e) {
        e.preventDefault();


        const pet = {
            species: this.state.species,
            name: this.state.name,
            age: this.state.age,
            petImage: this.state.petImage
        }


        console.log(pet);

        axios.post('http://localhost:5000/add_pet', pet)
            .then(res => console.log(res.data));

        //window.location = '/';

    }

    render() {
        return (
            <div>
                <h3>Add a Pet for Adoption</h3>
                <form onSubmit={this.onSubmit} encType="multipart/form-data">
                    <div className="form-group">
                        <label>Species:</label>
                        <input
                        type="text"
                        className="form-control"
                        value={this.state.species}
                        onChange={this.onChangeSpecies}
                        />

                    </div>
                    <div className="form-group">
                      <label>Name:</label>
                      <input
                        type="text"
                        className="form-control"
                        value={this.state.name}
                        onChange={this.onChangeName}
                        />
                    </div>
                    <div className="form-group">
                        <label>Age:</label>
                        <input
                        type="text"
                        className="form-control"
                        value={this.state.age}
                        onChange={this.onChangeAge}
                        />
                    </div>
                    <div className="form-group">
                        <label>Image:</label>
                        <input
                        type='text'
                        className="form-control"
                        value={this.state.petImage}
                        onChange={this.onChangeImage}
                        />
                        <input
                        type="file"
                        className="form-control-file"
                        />
                    </div>

                    <input type="submit" value="Add New Pet" className="btn btn-primary"/>
                </form>
            </div>
        )
    }
}

Nodejs server file:

const express      = require('express');
const MongoClient  = require('mongodb').MongoClient;
const objectID     = require('mongodb').ObjectID;
const assert       = require('assert');
const bodyParser   = require('body-parser');
const cors         = require('cors');
const multer       = require('multer');
const path         = require('path');
//const uri        = require('../config/db');

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, './uploads/');
    },
    filename: function(req, file, cb) {
        cb(null, new Date().toISOString() + file.originalname);
    }
})
const upload       = multer({storage: storage, limits: {
    fileSize: 1024 * 1024 * 5
}});

const app          = express();

const port = process.env.PORT || 5000

// Connection URL
const uri = "mongodb+srv://joshdavid86:rocafella86@cluster0-f3byx.mongodb.net/test?retryWrites=true&w=majority"

//Middleware

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');


// Database Name
const dbName = 'adopt';

// Create a new MongoClient
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

// Index route
app.get('/', function(req, res){
    res.render(__dirname + '/index.html');
  });

// Create data in database
app.post('/add_pet', upload.single('petImage'), function (req, res){
    console.log(req.file);
    const pet = {
        species: req.body.species,
        name: req.body.name,
        age: req.body.age,
        petImage: req.file.path
    };
    client.connect(err => {
        assert.equal(null, err);
        console.log("Connected successfully to server");

         const db = client.db(dbName);
            db.collection('pet').insertOne(pet).then(function(result) {

            // process result
            console.log(result,'Darcel is Beautiful and data inserted!');
            client.close();
          })
    });
    res.redirect('/');
});

// Read data from database
app.get('/pets', function(req, res){
    const resultArray = [];
    client.connect(err => {
        assert.equal(null, err);
        console.log("Connected successfully to server");
        const db = client.db(dbName);
        const cursor = db.collection('pet').find({});
    iterateFunc = (doc,err) => {
            assert.equal(null, err);
            resultArray.push(doc);
            console.log(JSON.stringify(doc, null, 4));
            if(err) {
                console.log(err)
        }
        }
            cursor.forEach(iterateFunc);
            client.close();
            res.render('index', {pets: resultArray});

      });

});  

// Update data 
app.post('/update_pet', function (req, res) {
    const pet = {
        species: req.body.species,
        name: req.body.name,
        age: req.body.age,
        petImage: req.file.path
    };
    const id = req.body.id;

    client.connect(err => {
        assert.equal(null, err);
        console.log("Connected successfully to server");
        const db = client.db(dbName);
        db.collection('pet').updateOne({"_id": objectID(id)},
        {$set: pet}, function(err, result){
            assert.equal(null, err);
            console.log('Pet updated');
            client.close();

        });
    });
});

// Delete data
app.post('/delete_pet', function (req, res) {
    const id = req.body.id;
    client.connect(err => {
      assert.equal(null, err);
      console.log("Connected successfully to server");
      const db = client.db(dbName);
      db.collection('pet').deleteOne({"_id": objectID(id)},
          function(err, result){
           assert.equal(null, err);
           console.log('Pet deleted');
           client.close();
      });
    });
});

app.listen(port, () => console.log(`Server started on port ${port} and Darcel is Beautiful`));

import React，{Component}来自'React'；
从“axios”导入axios；
导出默认类NewPet扩展组件{
建造师（道具）{
超级（道具）；
this.onChangeSpecies=this.onChangeSpecies.bind（this）；
this.onChangeName=this.onChangeName.bind（this）；
this.onchangage=this.onchangage.bind（this）；
this.onChangeImage=this.onChangeImage.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
此.state={
物种：''，
名称：“”，
年龄：''，
小图像：“”
}
}
变更物种（e）{
这是我的国家({
种类：e.目标值
});
}
onChangeName（e）{
这是我的国家({
名称：e.target.value
});
}
一次变更（e）{
这是我的国家({
年龄：e.target.value
});
}
onChangeImage（e）{
这是我的国家({
petImage:e.target.files[0]
});
}
提交（e）{
e、 预防默认值（）；
常数宠物={
物种：本州物种，
名称：this.state.name，
年龄：这个州，
佩蒂玛吉：这个。州。佩蒂玛吉
}
控制台日志（pet）；
轴心柱http://localhost:5000/add_pet",宠物)
。然后（res=>console.log（res.data））；
//window.location='/'；
}
render（）{
返回(
添加宠物供收养
种类：
姓名：
年龄：
图片：
)
}
}
Nodejs服务器文件：
const express=require（'express'）；
const MongoClient=require（'mongodb'）。MongoClient；
const objectID=require（'mongodb'）.objectID；
const assert=require（'assert'）；
const bodyParser=require（'body-parser'）；
const cors=需要（“cors”）；
const multer=require（'multer'）；
const path=require（'path'）；
//常量uri=require（'../config/db'）；
const storage=multer.diskStorage({
目标：功能（请求、文件、cb）{
cb（空“./上传/”）；
},
文件名：函数（请求、文件、cb）{
cb（空，新日期（）.toISOString（）+文件.originalname）；
}
})
const upload=multer（{存储：存储，限制：{
文件大小：1024*1024*5
}});
常量app=express（）；
const port=process.env.port | 5000
//连接URL
const uri=“mongodb+srv://joshdavid86:rocafella86@cluster0-f3byx.mongodb.net/test？retryWrites=true&w=多数”
//中间件
use（bodyParser.urlencoded（{extended:true}））；
use（bodyParser.json（））；
应用程序使用（cors（））；
app.use（express.static（path.join（uu dirname，'public'））；
app.engine（'html'，require（'ejs'）.renderFile）；
app.set（'view engine'，'html'）；
//数据库名称
constdbname='adopt'；
//创建新的MongoClient
const client=new MongoClient（uri，{useNewUrlParser:true，useUnifiedTopology:true}）；
//索引路径
app.get（'/'，函数（req，res）{
res.render（uu dirname+'/index.html'）；
});
//在数据库中创建数据
app.post（'/add_pet'，upload.single（'petImage'），函数（req，res）{
console.log（请求文件）；
常数宠物={
种类：所需身体种类，
名称：req.body.name，
年龄：要求的身体年龄，
petImage:req.file.path
};
client.connect（err=>{
assert.equal（null，err）；
log（“已成功连接到服务器”）；
const db=client.db（dbName）；
db.collection（'pet'）.insertOne（pet）.然后（函数（结果）{
//过程结果
log（结果是“Darcel很漂亮，插入了数据！”）；
client.close（）；
})
});
res.redirect（'/'）；
});
//从数据库中读取数据
app.get（'/pets'，函数（req，res）{
常量结果数组=[]；
client.connect（err=>{
assert.equal（null，err）；
log（“已成功连接到服务器”）；
const db=client.db（dbName）；
const cursor=db.collection（'pet'）.find（{}）；
iterateFunc=（文档，错误）=>{
assert.equal（null，err）；
结果推送（doc）；
log（JSON.stringify（doc，null，4））；
如果（错误）{
console.log（错误）
}
}
forEach（iterateFunc）；
client.close（）；
res.render（'index'，{pets:resultArray}）；
});
});  
//更新数据
应用程序发布（'/update_pet'，函数（请求、回复）{
常数宠物={
种类：所需身体种类，
名称：req.body.name，
年龄：要求的身体年龄，
petImage:req.file.path
};
const id=req.body.id；
client.connect（err=>{
assert.equal（null，err）；
log（“已成功连接到服务器”）；
const db=client.db（dbName）；
db.collection（'pet'）.updateOne（{“\u id”：objectID（id）}，
{$set:pet}，函数（err，result）{
assert.equal（null，err）；
console.log（“宠物更新”）；
client.close（）；