Проблемы при загрузке файла изображения с мультером (React и Node.js)

Question

Я часами пытался найти решение для чего-то, что должно быть довольно простым: загрузка файла на сервер с клиента.Я использую React.js на внешнем интерфейсе, Express на внутреннем интерфейсе и multer для загрузки изображений.

Когда я пытаюсь загрузить файл, ничего не происходит.Каталог uploads/ создан, но туда не попадает файл.req.file и req.files равны undefined.req.body.file пусто.Данные формы существуют до ее отправки.

Если я установлю заголовок Content-Type на "multipart/form-data", я получу граничную ошибку от multer.

Ввод

<input 
    onChange={this.sendFile}
    name="avatar"
    placeholder="Choose avatar"
    type="file"
/> 

sendFile

sendFile = e => {
    const data = new FormData();
    const file = e.target.files[0];
    data.append("file", file);
    this.props.sendFile(data);
};

Redux action

export default file => async dispatch => {
    const res = await axios.post("/api/upload/", { file });
};

Express

const multer = require("multer");
const upload = multer({ dest: "uploads/" });

router.post("/upload/", upload.single("avatar"), (req, res) => {
    return res.sendStatus(200);
});

Answer 1

Я попытался воспроизвести его и заставил работать следующим способом:

sendFile = e => {
  const data = new FormData();
  const file = e.target.files[0];
  data.append("avatar", file); // <-- use "avatar" instead of "file" here
  axios({
    method: 'post',
    url: 'http://localhost:9000/api/upload',
    data: data,
    config: { headers: { 'Content-Type': 'multipart/form-data' } }
  });
};

Answer 2

Попробуйте установить заголовок типа содержимого равным multipart/form-data в запросе axios и отправить полный объект FormData в качестве второго параметра.

Как это:

const config = {
    headers: {
        'content-type': 'multipart/form-data'
    }
};
axios.post('/api/upload/', file, headers);`