如何从 react、axios 和 dropzone 前端保存带有 php 的文件？

Question

我正在尝试上传带有 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;

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

?>

Answer 1

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

根据 move_uploaded_file 文档：

This function checks to ensure that the file designated by filename is a valid upload file (meaning that it was uploaded via PHP's HTTP POST upload mechanism). If the file is valid, it will be moved to the filename given by destination.

因此，对于您的情况，我会更改此行：

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

为此：

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

如何从 react、axios 和 dropzone 前端保存带有 php 的文件？

How do I save a file with php from a react, axios, and dropzone front end?

php

reactjs

axios

dropzone