如何使用php从react、axios和dropzone前端保存文件？

我试图上传一个带有react、axios和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;

import React，{Fragment}来自'React'；
从“react Dropzone”导入Dropzone；
从“axios”导入axios；
类ContentForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
用户名：“”，
电子邮件：“”，
被检查：错误
};
}
myChangeHandler=（事件）=>{
这是我的国家({
用户名：event.target.value
});
}
myChangeHandlerEmail=（事件）=>{
这是我的国家({
电子邮件：event.target.value
});
}
toggleChange=（事件）=>{
这是我的国家({
已检查：！this.state.isChecked
});
}
handleSubmit=事件=>{
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({
方法：“post”，
url:'PHP-CODE-url'，
数据：bodyFormData，
标题：{'Content-Type'：'multipart/form data'}
})
.然后（功能（响应）{
//成功
控制台日志（响应）；
})
.catch（函数（响应）{
//处理错误
控制台日志（响应）；
});
}
}
render（）{
返回(
全名*：

电子邮件地址*：

{
这个.setState（{
“图像”：已接受}）；
}}>
{（{getRootProps，getInputProps，isDragActive，isDragReject}）=>(
形象

{${this.state.image？`image“${this.state.image.map（（项目，i）=>item.name）}”已上载：`:“将文件拖放到此处，或单击以选择文件”}`}

)}
我同意我已经合法地提交了此图像所需的必要文件。
提交
)
}
}
导出默认内容格式；

我的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";
}

?>

---

看看PHP代码，在

move\u uploaded\u file

函数中，您在第二个参数中包含了一个路径，但我相信您还需要在路径中包含完整的文件名

根据文件：

此函数检查以确保文件名指定的文件是有效的上载文件（意味着它是通过PHP的HTTP POST上载机制上载的）。如果文件有效，它将被移动到目标指定的文件名

所以，在你的情况下，我会改变这一行：

move_uploaded_file($_FILES['image']['tmp_name'], $uploaddir)

为此：

move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)

---

在PHP-中打开错误报告。然后，把你的错误发回来。