React Как передать на сервер объект с данными и картинки одновременно?

Question

[Yaolegol]

Всем привет, подскажите как в react передать на сервер объект с данными и картинки одновременно?

Сейчас компонент передает данные на сервер (без картинки) так:

//обработчик на кнопку отправить
handleCreateProduct = event => {
        let postData = {
            category: this.state.categoryValue,
            title: this.state.title
            image:  this.state.title //заготовка для картинки
         }
         axios.post('/admin/create-product', postData )
}

как добавить отправку картинки?

Answer 1

[Yaolegol]

Нашел решение:

let formData = new FormData();
        let config = {
            header: {'content-type': 'multypart/form-data'}
        }        
        
        //смысл цикла - пройтись по postData (см. код в самом вопросе) и для каждого
        //значения (category, title) выполнить
        //formData.append( key (например category), postData[key] (значение) );
           
        for (let key in postData) {
            
            //для картинок сделать тоже самое только с одним ключом "images"

            if(key === 'images') {                
                for (let key in postData['images']) {
                    formData.append('images', postData['images'][key]);
                }  
            } else {
                formData.append(key, postData[key]);
            }
        }

        axios.post('/admin/create-product', formData, config)

Затем, чтобы корректно обработать это все на node сервере пишем код:

//код для настройки сервера на node js и express см. в интернете
//подключаем multer 
const multer = require('multer');
const uploads = multer({dest:'uploads/'});

app.use(uploads.any());

//используем express router - как пользоваться см. в интернете
router.post('/admin/create-product', (req, res, next) => {
    console.log('req.files', req.files);
    console.log('req.body', req.body);
}

Answer 2

[Kovalsky]

SO: How do you send images to node js with Axios?

Comments

[Yaolegol]

Спасибо за ответ, но мне непонятно как отправить одновременно и данные и картинку. В приведенной ссылке только про отправку картинок

[Kovalsky]

Yaolegol, ну да, там только о картинках речь.

Может это поможет: https://www.reddit.com/r/javascript/comments/7tgg1...

Если нет, то могу предложить либо вариант отправки в два этапа - картинка и текст по отдельности -, либо вариант с отправкой картинки в base64.

[Yaolegol]

Никита Полевой, спасибо за участие, покопался в интернете нашел решение