Как загрузить и хранить фото на сервере (React+Express+Mongo)?

Question

[Андрей Охотников]

Как из Реакта передать фото на сервер с последующим хранением там?
На клиенте я получаю объект в котором хранится этот файл

{title: "1", description: "2", photo: File(1240), authorLink: "5a718696b9a93f333bc282df", author: "123"}

Отправляю объект через axios

axios
    .post("http://localhost:8000/addPost", post, { withCredentials: true 
    })

Но на сервер файл не доходит , req.body.photo = {}

app.post("/addpost", (req, res, next) => {

const post = new Post(req.body);
    post.save(err => {
        if (err) {
        console.log(err);
        res.end();
    }
   console.log("Сохранен " + post);
   res.statusCode = 200;
   res.json(post);
   }); 
});

Answer 1

[Антон Спирин]

Используйте FormData для отправки файлов:

const formData = new FormData();

formData.append('file', someFile);
axios.post('/uploadFile', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});

На сервере используйте midlleware для обработки multipart/form-data. Вам подойдет: formidable, busboy, multer или любое другое middleware, решающее эту задачу.

Comments

[Андрей Охотников]

Спасибо, но на сервер приходит req.body = {}.
Что это за проклятье ?:)

[Антон Спирин]

Андрей Охотников, а ну вам на сервере надо использовать, что-то вроде formidable, busboy или multer. body-parser не видит файлы.

[Андрей Охотников]

Спасибо!

Answer 2

[Андрей Охотников]

Вопрос решен, добавлю от себя - принять файлы на сервере можно по данной инструкции https://alligator.io/nodejs/uploading-files-multer...