Блог

Главная - Вопросы по программированию - Загрузка изображений Reactjs с помощью Laravel PHP

Загрузка изображений Reactjs с помощью Laravel PHP

#javascript #php #reactjs #laravel-5.8

#javascript #php #reactjs #laravel-5.8

Вопрос:

Я использую следующий инструмент react-images-upload

 import React, { useState } from "react";
import ImageUploader from "react-images-upload";

const App = () => {
  const [image, setImage] = useState();

  const handleSubmit = () => {
    console.log(image[0]);
    axios
      .post(
        "http://192.168.1.6:8001/api/upload",
        { image: image[0] },
        {
          headers: headers,
        }
      )
      .then((response) => {
        console.log(response);
      });
  };

  return (
    <div>
      <ImageUploader
        withIcon={true}
        singleImage={true}
        onChange={(p) => setImage(p.concat(p))}
        imgExtension={[".jpg", ".gif", ".png", ".jpeg"]}
        maxFileSize={4242880}
        withPreview={true}
        withIcon={true}
        className="text-center"
      />
      <button onClick={handleSubmit}>Upload</button>
    </div>
  );
};

export default App;

введите описание изображения здесь

И в коде php:-

 public function upload(Request $request)
    {
         
         return response()->json($request->all());    
    }

В php значение $request->all() не отображает файл, отправленный в react request:-
введите описание изображения здесь

Как правильно отправить запрос с файлом / изображением на серверную часть php?

Ответ №1:

Выполните приведенную ниже команду:

 import React, { useState } from "react";
import ImageUploader from "react-images-upload";

const headers = {
  Accept: "application/json", "Content-Type": "multipart/form-data; boundary=---------------------------974767299852498929531610575",
}
const App = () => {
  const [image, setImage] = useState();

  const handleSubmit = () => {
    console.log(image[0]);
    axios
      .post(
        "http://192.168.1.6:8001/api/upload",
        { image: image[0] },
        {
          headers: headers,
        }
      )
      .then((response) => {
        console.log(response);
      });
  };

  return (
    <div>
      <ImageUploader
        withIcon={true}
        singleImage={true}
        onChange={(p) => setImage(p.concat(p))}
        imgExtension={[".jpg", ".gif", ".png", ".jpeg"]}
        maxFileSize={4242880}
        withPreview={true}
        withIcon={true}
        className="text-center"
      />
      <button onClick={handleSubmit}>Upload</button>
    </div>
  );
};

export default App;

На самом деле вам не хватает заголовков «multipart / form-data»

Комментарии:

1. Я пробовал, не получил ошибку в ответе api>Предупреждение</b>: отсутствует граница в multipart/form-data Данные POST в <b>Неизвестно</b> в строке <b>0

2. «Content-Type»: «составные / данные формы; граница=—————————974767299852498929531610575» Добавьте этот тип граничного значения

3. Решается с помощью var bodyFormData = new FormData(); bodyFormData.append(«image», image[0]); затем в теле запроса bodyFormData axios автоматически определит тип содержимого нет необходимости настраивать вручную, пожалуйста, обновите свой ответ, добавив эти строки