Блог

Я размещаю приложение react на своем сервере apache. Я использую пакет react-images-upload npm для получения изображения от пользователя, а затем отправляю его на свой php-сервер с помощью Axios.

Однако, когда я проверяю массив php $_FILES в ответе, он пуст.

Я проверил, может ли мой сервер получать файлы с небольшой формой загрузки на стороне php, и это отлично сработало, проверил ограничения памяти, что папка на сервере доступна для записи и тому подобное. Когда я console.log(миниатюра), я получаю файловый объект в консоли, поэтому загрузчик работает

кажется, все в порядке. Поэтому я подозреваю, что это как-то связано с вызовом 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";
 }
 

Любая помощь была бы очень признательна.

Я думаю, что это:

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

должно быть так:

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