Загрузка изображений из response to express - PullRequest
Новая
       9

Загрузка изображений из response to express

0 голосов
/ 16 июня 2020

У меня проблема при загрузке изображений из состояния реакции в express. Я получаю пустой массив в моем маршруте express при отправке изображений. Но тексты отправляются и принимаются в бэкэнде без проблем. Проблема в том, что изображения не отправляются на бэкэнд.

Это мой код React: 

import React, { Component } from 'react'
import ImageUploader from 'react-images-upload'
import API from '../../../../api'

export default class AddCategory extends Component {

    constructor(props) {
        super(props);
        this.state = {
            formData: {
                name_uz: '',
                name_ru: '',
                name_en: ''
            },
            pictures: [],
            response: false,
            loading: false,
            responseText: '',
            responseResult: false
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.clearForm = this.clearForm.bind(this);
        this.onDrop = this.onDrop.bind(this);
    }

    onDrop(picture) {
        this.setState({
            pictures: this.state.pictures.concat(picture),
        });
    }

    handleChange = e => {
        let state = (this.state); 
        let a = state.formData;
        a[e.target.name] = e.target.value;
        this.setState({formData: a});
    }

    handleSubmit = e => {
        e.preventDefault()
        this.setState({ loading: true })

        const texts = this.state.formData
        const pictures = this.state.pictures
        console.log(pictures)
        const postData = {texts, pictures}

        API.post(`/content/category/new`, {postData})
          .then(res => {
                this.setState({ responseText: res.data.text })
                res.data.status ? this.setState({ loading: false, responseResult: true, response: true }) : this.setState({ loading: false, responseResult: false, response: true })

            this.clearForm()

            setTimeout(function () {
              this.setState({response: false});
            }.bind(this), 6900)
        })

    }

    render() {
        return (
          <div className='content-manager-section'>
           <Form onSubmit={this.handleSubmit}>
                                <ImageUploader
                                    withIcon={true}
                                    buttonText='Выберите изображения'
                                    onChange={this.onDrop}
                                    imgExtension={['.jpg']}
                                    maxFileSize={5242880}
                                    label='Максимальный размер изображения: 2 Мб, Тип изображения: .jpg'
                                    fileSizeError='Файл слишком большой файл'
                                    fileTypeError='Недопустимый тип файла'
                                    singleImage={true}
                                />

                                  <input onChange={this.handleChange} value={this.state.formData.name_uz} maxLength='50' name='name_uz' placeholder='Название' />
                                  <input onChange={this.handleChange} value={this.state.formData.name_ru} maxLength='50' name='name_ru' placeholder='Название' />
                                  <input onChange={this.handleChange} value={this.state.formData.name_en} maxLength='50' name='name_en' placeholder='Название' />

                                        <Button className={this.state.loading ? 'loading submit-btn' : 'submit-btn'} type='submit'><i className='lnil lnil-cloud-upload'></i>Добавить</Button>


          </Form>
        </div>
        )
    }
}

Это мой Express код: 

const uuidv4 = require('uuid')
const multer = require("multer")

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, DIR);
    },
    filename: (req, file, cb) => {
        const fileName = file.originalname.toLowerCase().split(' ').join('-');
        cb(null, uuidv4() + '-' + fileName)
    }
});

var upload = multer({
    storage: storage,
    fileFilter: (req, file, cb) => {
        if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg") {
            cb(null, true);
        } else {
            cb(null, false);
            return cb(new Error('Only .png, .jpg and .jpeg format allowed!'));
        }
    }
});

.post('/new', upload.single('image'), (req, res) => {

        console.log(req.body)
        console.log(req.files)
})

Это то, что Express логинится в консоли 

{
   postData: {
     texts: { name_uz: '', name_ru: '', name_en: '' },
     pictures: [ {} ]
   }
}
undefined

Пожалуйста, дайте мне знать мои неправильные шаги.

Edit

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

1 Ответ

0 голосов
/ 22 июня 2020

Я сам решил. Мне пришлось использовать интерфейс FormData для отправки файлов. На случай, если кому-то это понадобится, здесь - документация.

А в Express я использовал поля multer для получения картинок и текстов.

Пример из моего Код реакции, который работает: 

        const formData = new FormData();
        for (var i = 0; i < this.state.pictures.length; i++) {
            formData.append('categorypic', this.state.pictures[i])
        }
        formData.append('texts', JSON.stringify(this.state.formTexts))

        axios.post('your_url_here', formData)
            .then(res => {

            })
...