React.js 上传文件到服务器

Question

我正在尝试学习 React 与 Laravel 8 以及 Sanctum 身份验证。我正在尝试使用 React 将文件上传到服务器。我正在使用 react-dropzone 来拖动和预览图像，Laravel8 这是 react-dropzone 代码。

const { getRootProps, getInputProps } = useDropzone({
    accept: "image/*",
    onDrop: (acceptedFiles) => {
      setFiles(
        acceptedFiles.map((file) =>
          Object.assign(file, {
            preview: URL.createObjectURL(file),
          })
        )
      );
    },
  });

我正在获取文件并且它是预览版。这是我用来上传到服务器的上传代码。

const data = new FormData();
files.map((file) => data.append("images", file));
apiClient.get("sanctum/csrf-cookie").then(() => {
      apiClient
        .post("api/upload/image/1", data, {
          headers,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.dir(err);
          toast.error("Something Went Wrong");
        })
})

在 Laravel 我正在尝试通过以下方式捕获请求 $request->all() 但它 returns images: {}

Answer 1

您需要通过 file 函数或作为对象属性捕获它，例如->images 而不是 all.

更多：https://laravel.com/docs/8.x/requests#files

React.js 上传文件到服务器

React.js Upload Files to server

reactjs

react-dropzone

laravel-8