使用 ReactJS 将图像发送到 PHP 端点

Question

我有一个 php 端点，我正在将数据从 ReactJS 发送到该端点。我根本无法从 html 输入获取图像数据以实际发送到我的 api。

以下是发送到 API 的数据示例。该文件是我在控制台中看到的内容，打开该对象后，会显示有关我上传的文件的更多信息。 （当他们上传图像时，我使用 setFormData() 将从

e.target.files[0]

上传的图像放入其中）

const formData = { 
  uploaded_image: File
};

当我记录我的表单数据时，

uploaded_image

在控制台内有

File

。那挺好的！ 然而，当我将数据 POST 到 api 时，实际发送的数据使这个

File

变成

{}

。当我检查 PHP 中发送的内容时，JSON 数据 (

file_get_contents('php://input')

) 显示

uploaded_image: {}

。

我尝试使用

new FormData()

将所有内容作为此类数据引入，但是一旦到达 API 端点，其中包含文件的字段在发送到 Devtools 的网络选项卡中的端点后就会被删除。

form_data.append('uploaded_image', e.target.files[0]);
# uploaded_image removed from POST data upon checking Network Tab for what was actually sent

我尝试过使用 Axios 和普通 Fetch，有或没有 FormData（没有我的意思是

JSON.stringify(formData)

）。介质始终会被移除。

const formData = { 
  data: File # uploaded image from html file input
};

const response = await fetch(url, {
  method: 'POST',
  body: JSON.stringify(formData)
});

我的 API 端点是 Windows Server 2016 上的 php8.0。

Answer 1

您需要将文件保存到 useState 挂钩中，然后使用 Formdata 在您的请求中使用该挂钩，例如：

 const [file, setFile] = useState()
  const formData = new FormData();
  formData.append('file', file)

  const response = await fetch(url, {
  method: 'POST',
  body: formData
});

并以您实际的 html 形式：

return(
 <input type="file" onChange={(e) => setFile(e.target.files[0])} 
)

如果这不起作用，可能是后端问题