Я пытаюсь загрузить изображение с ответной реакцией, топором ios и интерфейсом dropzone, и у меня есть php интерфейс. Я продолжаю получать сообщение об ошибке при попытке загрузить файл. Я не уверен, что это проблема переднего плана или проблема php. Я не эксперт в php, но я пытаюсь учиться.
Мой код реакции
import React, {Fragment} from 'react';
import Dropzone from 'react-dropzone';
import axios from 'axios';
class ContentForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
email: '',
isChecked: false
};
}
myChangeHandler = (event) => {
this.setState({
username: event.target.value
});
}
myChangeHandlerEmail = (event) => {
this.setState({
email: event.target.value
});
}
toggleChange = (event) => {
this.setState({
isChecked: !this.state.isChecked
});
}
handleSubmit = event => {
event.preventDefault();
if(this.state.isChecked){
bodyFormData.append('FullName', this.state.username);
bodyFormData.append('email', this.state.email);
bodyFormData.append("image", this.state.image);
axios({
method: 'post',
url: 'PHP-CODE-URL',
data: bodyFormData,
headers: {'Content-Type': 'multipart/form-data' }
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});
}
}
render() {
return (
<Fragment>
<div className="contentForm__contaner">
<form className="contentForm__form" onSubmit={this.handleSubmit}>
<div className="contentForm__fullName flexRWSBFS">
<p className="contentForm__label">Full Name*:</p>
<input className="contentForm__input" type='text' name='fullName' placeholder="Full Name*" onChange={this.myChangeHandler} />
</div>
<div className="contentForm__emailAddress flexRWSBFS">
<p className="contentForm__label">Email Address*:</p>
<input className="contentForm__input" type='text' name='emailAdd' placeholder="Email Address*" onChange={this.myChangeHandlerEmail} />
</div>
<Dropzone
onDrop={accepted => {
this.setState({
"image": accepted });
}}>
{({getRootProps, getInputProps, isDragActive, isDragReject}) => (
<section className="contentForm__section item4">
<div {...getRootProps()}>
<h3>Image</h3>
<input {...getInputProps()}/>
<p className={`dropZone__p item2 ${isDragActive && !isDragReject ? "activeDrop" : ""}`}>
{`${this.state.image ? `Image "${this.state.image.map((item,i) => item.name)}" is uploaded` : "Drag and drop your files here, or click to select files"}`}
</p>
</div>
</section>
)}
</Dropzone>
<section className="contentForm__section item5 flexCWCC">
<label className="item5__label">
<input
type="checkbox"
checked={this.state.isChecked}
onChange={this.toggleChange} />
I agree that I have submitted the necessary documents needed for this image legally.
</label>
<button className="item5__button">Submit</button>
</section>
</form>
</div>
</Fragment>
)
}
}
export default ContentForm;
Мой код Php, я просто хотел проверить, что он сохраняет файл.
<?php
$uploaddir = dirname(__FILE__).'/' . 'uploaded/';
$uploadfile = $uploaddir . basename( $_FILES['image']['name']);
if(move_uploaded_file($_FILES['image']['tmp_name'], $uploaddir))
{
echo "The file has been uploaded successfully";
}
else
{
echo "There was an error uploading the file";
}
?>