使用 Laravel PHP 上传 Reactjs 的图片

Question

我正在使用以下工具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() 的值没有显示在响应请求中发送的文件：-

将带有文件/图像的请求发送到 php 后端的正确方法是什么？

Answer 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”