Файл, отправленный из React, не отображается в теле ответа серверной части - PullRequest
Новая
       4

Файл, отправленный из React, не отображается в теле ответа серверной части

2 голосов
/ 12 июля 2020

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

Вот код для обновления состояния: 

handleInputChange = (event) => {
        this.setState({
            ...this.state,
            file: event.target.files[0]
        })
    }

Это код для отправки файла 

  submit = () => {
        console.log(this.state.file)
        axios.post(process.env.REACT_APP_SERVER + '/uploadThumbnail', { file: this.state.file, status: true})
            .then(response => {
                console.log(response)
            })
    }

Теперь я вижу файл в консоли. Но в бэкэнде он показывает 

REQUEST BODY: {file:{}, status: false}

Кто-нибудь знает, как решить эту проблему?

1 Ответ

0 голосов
/ 12 июля 2020

Неправильно отправлять файл как json. Я предполагаю, что вы используете nodejs backend и, возможно, используете multer для загрузки файла?

Чтобы отправить объект файла через api, вы должны отправить его как данные формы. 

const data = new FormData();
data.append('file', this.state.file);
data.append('status', true);
axios.post(process.env.REACT_APP_SERVER + '/uploadThumbnail', data, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})
.then(response => {
    console.log(response)
})
...