Reactjs Dropzone и Laravel 5.6

Я пытаюсь создать способ вложения файлов из плагина Reactjs Dropzone в POST-запрос axios.

В настоящее время мой модуль выполняет следующий запрос ajax:

submitPost() {
        const formData = new FormData;
        const err = this.validate();

        if( !err ) {
            this.setState({buttonText: 'Posting...'});
            axios.post('/user/post/create/', {
                content: this.state.post_content,
                images: this.state.images,
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
            })
            .then(response => {
                console.log(response);
                this.setState({buttonText: 'Success'});
                setTimeout(
                    function() {
                        this.setState({
                            buttonText: 'Post',
                            post_content: '',
                            images: []
                        });
                        $('#post_content').val('');
                    }.bind(this), 1000
                );
            }).catch(error => {
                console.log(error.response);
                this.setState({buttonText: 'Error'});
                setTimeout(
                    function() {
                        this.setState({buttonText: 'Post'});
                    }.bind(this), 1000
                );
            });
        } else {
            this.setState({buttonText: 'Error'});
            setTimeout(
                function() {
                    this.setState({buttonText: 'Post'});
                }.bind(this), 1000
            );
        }
    }

И следующие состояния определены:

constructor(props){
        super(props);
        this.state= {
            progressValue: '0',
            progressText: '0%',
            buttonText: 'Post',
            post_content: '',
            images: []
        }
    }

А вот модуль загрузки, который я написал, используя Reactjs Dropzone:

import React, { Component } from 'react';
import Dropzone from 'react-dropzone'
import $ from "jquery";

export class Uploader extends Component {

    constructor(props){
        super(props);
        this.state= {
            images: this.props.images
        }
    }

    onDrop(files) {
        this.setState({
            images: files
        });

        console.log(files);

        this.props.handleImageUpload(files);
    }

    render() {
        return (
            <div className="uploader">
                <div className="previews">
                {this.state.images.map((file) =>
                    <div 
                        className="preview"
                        key={file.preview}>
                        <img src={file.preview} />
                    </div>
                )}
                </div>
                <Dropzone onDrop={this.onDrop.bind(this)}>
                    <p>Try dropping some files here, or click to select files to upload.</p>
                </Dropzone>
            </div>
        );
    }
}

Буду признателен за любую помощь, в настоящее время я пытаюсь загрузить файлы из состояния изображений, который представляется в виде массива, но проходит в следующем формате:

[{ "Предварительный просмотр": "блоб: HTTP://outist.local/3c3fc96b-b89d-41c8-8835-3309be8ac430"},{"Предварительный просмотр": "блоб: HTTP://outist.local/6cf9aa40-0538-4cef-affe-58951afef2eb"},{" предварительный просмотр ":" блоб: HTTP://outist.local/4631977b-1301-498d-b4e8-611f9a57b6bb"},{" предварительный просмотр ":" блоб: HTTP://outist.local/1650a49c-2eed-408с-a035-473cade2bfa6"}]

0 ответов

Другие вопросы по тегам