Как реализовать отправку файлов через React на бэкенд?

Question

[Адилет Касымбаев]

Добрый день. Проблема заключается в том, что у меня есть два компонента: первый - драг энд дроп изображений, все файлы, прошедшие валидацию, складываются в состояние, второй - обычная форма для создания поста. Как я понял, в json изображения вкладывать нельзя, но я нашел способ отправки данных через FormData, однако, не могу понять как мне одновременно отправить и изображения(формдату), и сами данные поста. Извиняюсь за излишнюю тупость, если вдруг ответ окажется слишком простым.

Comments

[Владимир]

А в каком виде API принимает пост?

[Адилет Касымбаев]

Владимир, API на рест фреймворке. Немного не понял ваш вопрос..

[Адилет Касымбаев]

Владимир, json, если я правильно понял ваш вопрос

[Адилет Касымбаев]

Владимир,

[Владимир]

Я не вижу поля, куда бы вы могли отправить картинки.
Каким образом вы собираетесь отправлять файлы, вместе с постом, если АПИ их не принимает?
Структура запросов с фронта должна отталкиваться от структуры API, чтобы поучить ответ на ваш опос опишите подробно в опросе, куда именно вы собираетесь эти файлы отправлять.

[Адилет Касымбаев]

Владимир, снизу поле img, которое принимает изображения

[Mesuti]

Картинки хранятся в виде строки. Скорее всего в base64
В чем проблема отправить обычную строку?
Всю форму в объект, объект в строку и отправить в post

Бекенд должен интерпретировать строку обратно в картинку.

Про компонент не знаю, но на обычном js отправляются файлы так

js

document.querySelector('.button').addEventListener('click', (e) => {
    e.preventDefault();
    const form = document.forms.sendform,
        formData = new FormData(form),
        xhr = new XMLHttpRequest();

    xhr.open("POST", "send.php");

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.response)
            }
    };
    xhr.send(formData);
});

php

<?php
function send_mail($to, $body, $email, $filename) {
	$subject = 'Форма обратно связи с сайта';
	$boundary = "--".md5(uniqid(time())); // генерируем разделитель
	$headers = "From: ".$email."\r\n";
	$headers .= "MIME-Version: 1.0\r\n";
	$headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n";
	$multipart = "--".$boundary."\r\n";
	$multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n";
	$multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n";

	$body = $body."\r\n\r\n";

	$multipart .= $body;
	foreach ($filename as $key => $value) {
        $fp = fopen($value[0], "r");
        $content = fread($fp, filesize($value[0]));
        fclose($fp);
        $file .= "--".$boundary."\r\n";
        $file .= "Content-Type: application/octet-stream\r\n";
        $file .= "Content-Transfer-Encoding: base64\r\n";
        $file .= "Content-Disposition: attachment; filename=\"".$value[1]."\"\r\n\r\n";
        $file .= chunk_split(base64_encode($content))."\r\n";
    }
    $multipart .= $file."--".$boundary."--\r\n";
    mail($to, $subject, $multipart, $headers);
}

$to = '[e-mail]'; // получатель

if (true) {
    $text = $_POST['info'];
    if($_FILES) {
        print_r($_FILES);
        $filepath = array();
        $filename = array();
        $file2 = array();
        $i = 0;
        foreach ($_FILES["file"]["error"] as $key => $error) {
            if ($error == UPLOAD_ERR_OK) {
                $filename[$i][0] = $_FILES["file"]["tmp_name"][$key];
                $filename[$i][1] = $_FILES["file"]["name"][$key];
                $i++;
            }
        }
    }
    $body = "Текст:\r\n".$text."\r\n\r\n";
    send_mail($to, $body, $email, $filename);
}

echo 'Отправлено';
?>

[Адилет Касымбаев]

Mesuti, ясно, спасибо!

[Mesuti]

Александр, Да, можно через fetch.
Это одно и то же, разница только в синтаксисе.
Я бы еще const на var переделал, от греха подальше (iOs Google Chrome)

Также:
https://caniuse.com/mdn-api_xmlhttprequest

https://caniuse.com/fetch

Answer 1

[Kirill Makarov]

Отправляешь через формату, new FormData, при этом бэкендер должен знать что там формата. А все остальные параметры добавлешь через formdata.append(name, param). Тогда будет полноценная загрузка файла в представлении blob.

Либо же в представлении base64 но это себе же дороже выйдет.

Comments

[Адилет Касымбаев]

спасибо! с бейс64 и вправду некоторый гемор был

[Kirill Makarov]

Адилет Касымбаев, да не за что)

Answer 2

[bro-dev]

В момент выбора файла, он уже по отдельной апихе загружается куда то на бэк, и получает ид файла. Дальше форма шлёт обычный json в котором в поле файлИд лежит ид файла ранее полученного.