Question

我看过很多关于堆栈溢出的文章，但是到目前为止，我发现没有任何帮助。我正在尝试使用MERN堆栈将图像（文件）从客户端发送到服务器。我正在尝试使用Multer解析图像，并且正在使用AXIOS将数据发送到服务器端。

使用Postman可以正常工作，但是，如果我尝试通过我的React前端发送数据，它将无法正常工作。

我想知道为什么从客户端发送的图像在服务器端没有收到

客户端代码

this.onChangeName = this.onChangeName.bind(this);
this.onChangeRetreatImage = this.onChangeRetreatImage.bind(this);
this.onSubmit = this.onSubmit.bind(this);

this.state= {
      name : "",
      retreatImage : null
}

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

onChangeRetreatImage(event){
 this.setState({
  retreatImage : event.target.files[0]
 })
}

onSubmit(event){
 event.preventDefault();

 console.log("Submit form : ", this.state)

 const newRetreat = {
  name : this.state.name,
  retreatImage : this.state.retreatImage
 }

 axios.post('http://localhost:1234/retreats/addRetreat', newRetreat)
  .then(res => console.log(res.data));
}

JSX

<form onSubmit={this.onSubmit} encType="multipart/form-data">

 <div className="form-group">
  <label>Retreat Name</label>
  <input 
    type="text" 
    value={this.state.name} 
    onChange={this.onChangeName}>
  </input>
 </div>

 <div className="form-group">
  <label>Upload Images:</label>
  <input 
   type="file" 
   name="retreatImg1" 
   onChange={this.onChangeRetreatImage}
  </input>
 </div>

 <div className="form-group">
  <input type="submit" value="Create retreat" className="btn btn-primary"></input>
 </div>
</form>
)}

提交表单时，我看到填充了this.state.retreatImage： image of screenshot of form submit

但是在服务器端，我有req.file undefined和req.body作为{ name : foo, retreatImage : {} }

所以我猜想我的React前端没有正确发送表单数据，或者multer在与AXIOS一起发送时没有正确解析它，如上所述，使用邮递员时一切正常。

路由

const express = require('express');
const router = express.Router();
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 + new Date().toISOString());
  }
});

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

router.post('/addRetreat', upload.single('retreatImg1'), retreatController.addRetreat);```

（我在retreatController中记录了req.file和req.body）

撤退模型

const retreatSchema = new Schema({
  name : { type : String },
  retreatImage : { data : Buffer }
});

在此先感谢您提供的任何帮助。

我是刚开始发布有关堆栈溢出问题的人，所以如果有什么我可以做得更清楚的事情，请告诉我。

Answer 1

我想出了答案，我需要将数据作为FormData发送并相应地更新标头

onSubmit(event){
//prevent default form logic
event.preventDefault();

const formData = new FormData()
formData.append('name', this.state.name);

//sending multiple images so had to loop through
for(var j = 0; j < this.state.retreatImages.length; j++){
  formData.append(
    'retreatImages',
    this.state.retreatImages[j],
    this.state.retreatImages[j].name
  )
}

console.log("Submit form : ", this.state)

// set headers to pass as final argument in axios post
const headers = {
  Authorization : "Bearer " + token,
  'Content-Type': 'multipart/form-data'
}

axios.post('http://localhost:1234/retreats/addRetreat', formData, {
  headers : headers
})
  .then(res => console.log(res.data));

MERN Stack-使用Axios将文件发送到服务器

1 个答案: