Node.js MERN堆栈-使用Axios将文件发送到服务器

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

使用邮递员可以很好地工作，但是如果我尝试通过我的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>
)}

（我在控制器中记录req.file和req.body）

撤退模式

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

提前感谢您提供的任何帮助

---

我是一个新发布的问题堆栈溢出，所以如果有什么我可以做的更清楚，请让我知道

我找到了答案，我需要将数据作为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));

onSubmit（事件）{
//防止默认表单逻辑
event.preventDefault（）；
const formData=new formData（）
formData.append（'name'，this.state.name）；
//发送多个图像，因此必须循环通过
对于（var j=0；jconsole.log（res.data））；

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));