Передать изображение через запрос axios

Question

Итак, мне нужно передать изображение (и текст) из реагирующего компонента в API.

У меня есть этот код в моем реагирующем API:

export const addProject = (name, imgs) => {
    var imgsArray = [];
    Object.keys(imgs).map(x => imgsArray.push(imgs[x]));
    console.log(imgsArray); //Will print(with 3 files passed): (3) [File(179582), File(32123), File(122404)]
    var formData = new FormData();
    formData.append("name", name);
    formData.append("images", imgsArray);
    return axios.post('/api/addProject',formData,{ headers: {'Content-Type': 'multipart/form-data' }});
}

Пока у нас естьобъект изображения и передал его в объект formData через почтовый запрос к узлу js api.

Это вызывает функцию ниже (удалил большую часть кода, поскольку он не имеет отношения к моей проблеме:

router.post('/addProject', upload.array('file'), (req, res) => {
    console.log(typeof req.body.images); //Will print out string

    console.log(req.body.images); //Will print(with 3 files passed): [object File],[object File],[object File]
});

Итак, я передаю файл, но он был преобразован в строку. Я потратил целую вечность, пытаясь исправить это безрезультатно.

Спасибо за любую помощь!

Answer 1

Когда вы говорите о массиве, вам нужно использовать [], следующий код может помочь вам

export const addProject = (name, imgs) => {
    var formData = new FormData();
    formData.append("name", name);
    Object.keys(imgs).forEach(x => formData.append("images[]", x));
    return axios.post('/api/addProject', formData, { headers: {'Content-Type': 'multipart/form-data' }});
}