MERN Stack - отправка файла на сервер с помощью Axios - PullRequest
Новая
       43

MERN Stack - отправка файла на сервер с помощью Axios

0 голосов
/ 26 октября 2019

Я посмотрел несколько сообщений о переполнении стека, но ничего, что я нашел, не помогло мне до сих пор. Я пытаюсь отправить изображение (файл) со стороны клиента на сервер, используя стек MERN. Я пытаюсь проанализировать изображение с помощью Multer и использую AXIOS для отправки данных на мою серверную часть.

При использовании Postman это работает нормально, однако, если я пытаюсь отправить данные через мой интерфейс реакции, это не работает,

Я хочу знать, почему я не получаю изображение на стороне сервера, когда оно отправляется со стороны моего клиента

Код на стороне клиента 

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 заполнен: изображение скриншота формы отправки

Однако на моей стороне сервера у меня есть req.file undefined и req.body как { name : foo, retreatImage : {} }

Так что я предполагаю, что либо данные формы неправильно отправляются моим React frontконец, или 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);```

(я регистрирую req.file и req.body в моем retreatController)

Модель ретрита 

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

Заранее благодарим за любую помощь.

Я новичок в публикации вопроса о переполнении стека, поэтому, если есть что-то, что я могу сделать, чтобы быть яснее, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 01 ноября 2019

Я разобрался с ответом, мне нужно было отправить данные в виде 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));
...