Проблемы с отправкой файла из интерфейса React с помощью Fetch в Express 4 API - PullRequest
Новая
       52

Проблемы с отправкой файла из интерфейса React с помощью Fetch в Express 4 API

0 голосов
/ 23 марта 2019

Я пытаюсь отправить файл изображения из моего интерфейса React в мой экспресс-API: 

fetch('http://localhost:4000/upload/', {
  method: 'POST',
  body: this.state.picture[0],
})

Файл выглядит правильно в консоли Chrome, когда я его регистрирую: 

File {name: "31-614x614.jpg", lastModified: 1553111550472, lastModifiedDate: Wed Mar 20 2019 12:52:30 GMT-0700 (Pacific Daylight Time), webkitRelativePath: "", size: 95101, …}

Однако, когда я пытаюсь зарегистрировать файл в запросе на моем бэкэнде, я получаю неопределенные или пустые объекты запроса в зависимости от того, как я его настроил.

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

Вот мой маршрутизатор: 

const Router = require('express').Router();
const imgController = require('./controllers/imgController');

Router.get('/images/', imgController.getImages);
Router.post('/upload/', imgController.postImage);

module.exports = Router;

И контроллер, на котором я просто пытаюсь увидеть отправляемый файл:

exports.postImage = (req, res) => {
  console.log("IN POST IMAGE")
  console.log(req.body)
  console.log(req.files)
}

Я попадаю в контроллер, но запрос никогда не содержит файл.Любая помощь приветствуется!

1 Ответ

1 голос
/ 23 марта 2019

Вы пытались создать элемент formData и отправить его? 

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})
...