为什么通过 Postman 和通过浏览器上传文件之间存在差异？ [复制]

Question

尝试在浏览器上尝试将文件（POST 请求）上传到我的端点时，我无法弄清楚为什么会收到此服务器错误 Call to a member function getClientOriginalName() on null。

在 Postman 上运行良好，我可以成功上传。奇怪的是，我在 Postman 上没有收到上述错误，但在浏览器上尝试时确实收到了。我相信我的 JS 已经关闭，但我不太确定，因为我已经在阳光下尝试了所有方法来尝试纠正这个问题，但无济于事，我碰壁了。

我该如何解决这个问题？

注意：有关更多详细信息，这是我面临的差异：当我 dd($request->all()); 并在浏览器上提交表单时 - 我得到（这是不正确的）：

array:1 [
   "userUpload" => []
]

当我在 Postman 上执行此操作时 - 我得到（这是正确的）：

array:1 [
  "userUpload" => Illuminate\Http\UploadedFile {#1325
    -test: false
    -originalName: "gallery12.jpg"
    -mimeType: "image/jpeg"
    -error: 0
    #hashName: null
    path: "/tmp"
    filename: "php4FMimY"
    basename: "php4FMimY"
    pathname: "/tmp/php4FMimY"
    extension: ""
    realPath: "/tmp/php4FMimY"
    aTime: 2022-01-20 19:42:45
    mTime: 2022-01-20 19:42:45
    cTime: 2022-01-20 19:42:45
    inode: 3146782
    size: 519395
    perms: 0100600
    owner: 1000
    group: 1000
    type: "file"
    writable: true
    readable: true
    executable: false
    file: true
    dir: false
    link: false
  }
]

这是我的 JS：

const fileUpload = () => {
    const url = 'http://localhost:8005/api/file-upload';

    let input = document.querySelector('input[type="file"]')

    let data = new FormData()
    data.append('file', input.files[0])

    const postData = {
        'userUpload' : input.files[0]
    }

    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    }

    // All of these are displaying the correct data
    console.log(authToken);
    console.log(postData);
    console.log(headers);

    axios.post(url, postData, {headers})
        .then(resp => {
            console.log(resp);
        }).catch(error => {
            console.log(error);
        });
}

return (
    <form encType="multipart/form-data" method="POST">
        <input type="file" name="userUpload" required/>
        <Button variant="primary" onClick={fileUpload}>Upload!</Button>
    </form>
);

这是 FileUploadController.php：

public function fileUpload(Request $request)
    {

//        dd($request->all());
        $path = env('AWS_S3_PATH');
        $file = $request->file('userUpload');
        $imgName = $file->getClientOriginalName();
        $bucket = env('AWS_BUCKET');
        $region = env('AWS_REGION');
        $url = "https://{$bucket}.s3.{$region}.amazonaws.com{$path}{$imgName}";
        $userId = Auth::user()['UserID'];

        $file->storeAs(
            $path, // Folder
            $imgName, // Name of image
            's3' // Disk Name
        );

        $data = [
            'url' => $url,
            'UserID' => $userId,
            'isUploaded' => true,
            'timeStamp' => time(),
            'updated_at' => time()
        ];

        Upload::create($data);

        return $data;

    }

Answer 1

您的 axios 请求中的标头似乎缺少 'Content-Type': 'multipart/form-data'。

试试这个：

const headers = {
    "Accept": 'application/json',
    "Authorization": `Bearer ${authToken}`,
    "Content-Type": 'multipart/form-data'
}