我正在尝试将图像上传到服务器,以便可以将图像保存在服务器上。使用的服务器语言是 PHP。前端站点是 react.js 并选择我正在使用的文件react-dropzone。图像被选中,我在这个函数中处理丢弃的图像。
onImageDrop(image) {
let addImage = this.state.images;
addImage.unshift(image[0]);
this.setState({images: addImage});
}
然后我在渲染方法中将图像映射到屏幕上。图像确实会出现在屏幕上。
{this.state.images.map((f, i) =>
<img key={i} src={f.preview} alt={f.name} style={{
border: "2px dashed gray",
margin: "10px",
width: "200px",
padding: "5px"
}}/>
)}
图像存储在本地 URL 中,我可以在客户端上预览。如果我控制台记录文件,它看起来像这样。
文件{预览:“blob:http://localhost:3000/9b499d57-9248-499c-8974-607143f2ed1d ”,名称:“IMG_20140421_151555.jpg”,lastModified:1398090260000,lastModifiedDate:2014 年 4 月 21 日星期一 15:24:20 GMT +0100(格林威治标准时间夏令时),webkitRelativePath: "", ...}
我想要做的是将文件作为 JSON 格式的 blob 发送到 PHP 脚本,以便我可以将图像保存在服务器上。这是服务器的 fetch 方法。我只是想在一分钟内发送一张图片。
validateandSubmit(){
fetch(serverScripts + "admin/Controllers/imageController.php", {
method: 'POST',
headers: {"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"},
body: JSON.stringify({
action: "ADD_IMAGE",
name: this.state.images[0].name,
blob: this.state.images[0].preview
}),
mode: 'cors'
}).then((response) => response.json()).then((data) => {
console.log(data);
}).catch((err) => {
console.error(err);
});
}
PHP脚本是
<?php
$_postData = json_decode(file_get_contents("php://input"), true);
if ($_postData['action'] == "ADD_IMAGE"){
echo json_encode(['ImageClass' => 'image received', 'success' => true]);
$theFile = fopen($_postData['name'], "w");
$fileData = $_postData['blob'];
fwrite($theFile, $fileData);
fclose($theFile);
}
写入服务器的文件是空的。如何发送图像?
我是一名学生,对编程很陌生。如果我离得很远,你能告诉我其他更好的方法吗?
如果您需要任何进一步的信息,请询问我。谢谢