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

【问题标题】：MERN Stack - Sending file to server using AxiosMERN Stack - 使用 Axios 将文件发送到服务器
【发布时间】：2020-02-22 07:06:30
【问题描述】：

我查看了许多关于堆栈溢出的帖子，但到目前为止我没有找到任何帮助。我正在尝试使用 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 前端没有正确发送表单数据，或者当使用 AXIOS 发送表单数据时，multer 没有正确解析它，如前所述，使用邮递员时一切正常。

路由

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

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

我不熟悉将问题发布到堆栈溢出，所以如果有什么我可以做的更清楚的，请告诉我。

【问题讨论】：

标签： node.js express axios multer mern

【解决方案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));

【讨论】：