javascript - React 应用程序不使用 Ajax 将文件发送到 php 服务器
问题描述
我在我的 apache 服务器上托管了一个 react 应用程序。我正在使用react-images-upload npm 包从用户接收图像,然后使用 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";
}
任何帮助将非常感激。
解决方案
我认为这:
formData.append("thumbnail", this.state.thumbnail);
应该是这样的:
formData.append("thumbnail", this.state.thumbnail[0]);
推荐阅读
- android - Firebase RecyclerView 项目之间的填充
- python-3.x - 使用 Selenium 从容器的文本区域获取文本
- python - 如何将netcdf iris cube中的投影x和y坐标转换为lat lon
- c# - 告诉调用者一个`异步任务
` 方法可能返回 null - machine-learning - Pickle tf.Gradient.Tape() 抛出错误:TypeError: can't pickle tfe.Tape objects
- ios - Xcode 在构建时卡住并且不允许打开任何其他应用程序
- python - 部分的正则表达式 BS4 输出,
- android - 单击自定义条目字段时,应用程序在 Cat S48c android 设备中崩溃
- mysql - MySQL将两个表的计算划分为新表中的更新
- arrays - 从包含特定键的对象数组中获取