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"}]