React.js 上传文件到服务器

如何解决React.js 上传文件到服务器

我正在尝试通过 Sanctum 身份验证与 Laravel 8 一起反应。我正在尝试使用 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() 但它返回 images: {}

解决方法

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