Dropzone node.js загружает изображение на сервер через JSON
Я пытаюсь загрузить изображение на сервер, чтобы изображение могло быть сохранено на сервере. Используемый язык сервера - PHP. Сайт переднего плана - это response.js, и я выбираю файлы, которые я использую response-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: Пн 21 апреля 2014 15:24:20 GMT+0100 (GMT Summer Time), webkitRelativePath: "", …}
То, что я хочу сделать, это отправить файл в виде BLOB-объекта в формате JSON в сценарий PHP, чтобы я мог сохранить изображение на сервере. Это метод выборки на сервер. Я просто пытаюсь отправить одно изображение в минуту.
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);
}
Файл, который записывается на сервер, пуст. Как я могу отправить изображение?
Я студент и новичок в программировании. Если я далеко, не могли бы вы сказать мне другие способы, которые будут работать лучше.
Если вам нужна дополнительная информация, пожалуйста, спросите меня. Спасибо