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);

  }

Файл, который записывается на сервер, пуст. Как я могу отправить изображение?

Я студент и новичок в программировании. Если я далеко, не могли бы вы сказать мне другие способы, которые будут работать лучше.

Если вам нужна дополнительная информация, пожалуйста, спросите меня. Спасибо

0 ответов

Другие вопросы по тегам