React 应用程序未使用 Ajax 将文件发送到 php 服务器

Question

我在我的 apache 服务器上托管了一个 React 应用程序。我正在使用 react-images-upload npm 包从用户接收图像，然后 post 使用 Axios 将其发送到我的 php 服务器。

然而，当我检查响应中的 php $_FILES 数组时，它是空的。

我已经测试了我的服务器是否可以在 php 端接收带有一点上传表单的文件，它运行良好，检查了内存限制，服务器上的文件夹是可写的等等。当我 console.log(thumbnail) 我在控制台中得到一个文件对象，所以上传器工作

一切似乎都很好。所以我怀疑这与 Ajax 调用有关。

前端代码：

import React, { Component } from 'react'
import protocol from 'protocol.js';

import axios from 'axios';
import { Route, Switch, Redirect, useLocation } from "react-router-dom";

import styles from "components/Payment/Payment.module.css";
import "components/Payment/Payment.css";
import ImageUploader from 'react-images-upload';

var localStorage = require('local-storage');

class Payment extends Component {

  constructor(props) {
    super()

    this.state = {
      thumbnail: []
    }
    this.handlePayment = this.handlePayment.bind(this);
    this.onDrop = this.onDrop.bind(this);
  }

  onDrop(thumbnail) {
    this.setState({
        thumbnail: this.state.thumbnail.concat(thumbnail),
    });
  }  

  handlePayment() {
    var formData = new FormData();
    formData.append("thumbnail", this.state.thumbnail);
    
    axios.post('https://11.111.111.111/backend/ajax_controller.php', formData, {
      headers:{
       'Content-Type': 'multipart/form-data',
      },
    })
    .then(resp => {
      console.log(resp)
    })        
  }

  render() {

    return (
      <div className={styles.container}>

        <ImageUploader
            withPreview={true}
            singleImage={true}
            withIcon={true}
            buttonText='Profilna slika'
            onChange={this.onDrop}
            imgExtension={['.jpg', '.png']}
            maxFileSize={5242880}
            fileSizeError={"too big"}
        />

        <button className={styles.paymentButton} onClick={this.handlePayment}>Plati</button> 

      </div>
    )
  }
}

export default Payment;

后端代码：

print_r($_FILES);
if (move_uploaded_file($_FILES['thumbnail']['tmp_name'], __DIR__."/assets/".$_FILES['thumbnail']['name'])) {            
 echo "done";
 } else {
  echo "error";
 }

如有任何帮助，我们将不胜感激。

Answer 1

我认为：

formData.append("thumbnail", this.state.thumbnail);

应该是这样的：

formData.append("thumbnail", this.state.thumbnail[0]);

React 应用程序未使用 Ajax 将文件发送到 php 服务器

React app not sending files to php server with Ajax

javascript

php

apache

reactjs

axios