Невозможно отправить multipart / form-data с помощью REACT на MySQL - PullRequest
Новая
       94

Невозможно отправить multipart / form-data с помощью REACT на MySQL

0 голосов
/ 09 июля 2020

Я не могу отправить изображение и данные формы на mysql. Мой бэкэнд находится в Java, и при использовании почтальона он отлично работает. Я не могу этого сделать, когда отправляю его из внешнего интерфейса. У меня есть поля для ввода имени пользователя, заголовка, описания и т. Д., А также изображения. Пожалуйста, помогите, где я ошибаюсь. введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 09 июля 2020

Пожалуйста, используйте эти уловки

Реакция: преобразовать ваш медиафайл в строку base64.

Java : преобразовать base64 в изображение (img, pdf, xlxs, et c ...)

Преобразование изображения в Base64 (REACT. JS): 

function convertBase64(url, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                var reader = new FileReader();
                reader.onloadend = function () {
                    callback(reader.result);
                }
                reader.readAsDataURL(xhr.response);
            };
            xhr.open('GET', url);
            xhr.responseType = 'blob';
            xhr.send();
        }

        convertBase64("path-of-the-image/user_picture.png", function (dataUrl) {
            //console.log('RESULT:', dataUrl);
        });

Преобразование Base64 в изображение (JAVA): 

// Needed Imports
import java.io.ByteArrayInputStream;
import sun.misc.BASE64Decoder;


def sourceData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAgAEl...==';

// tokenize the data
def parts = sourceData.tokenize(",");
def imageString = parts[1];

// create a buffered image
BufferedImage image = null;
byte[] imageByte;

BASE64Decoder decoder = new BASE64Decoder();
imageByte = decoder.decodeBuffer(imageString);
ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
image = ImageIO.read(bis);
bis.close();

// write the image to a file
File outputfile = new File("image.png");
ImageIO.write(image, "png", outputfile);
0 голосов
/ 09 июля 2020

Проблема в том, что вы пытаетесь отправить неправильное имя файла. Вы должны добавить файл, например: 

var file = event.target.files[0];

const formData = new FormData();
formData.append("file", file);

formData.append("var1", val1);  // Other fields

await fetch("url", {
    method: "POST",
    body: formData
}).then({
// code here
}).catch({
// code here
});

И на стороне сервера вы получите файл с file или любым другим именем, которое вы указали во время добавления его в данные формы.

...