为什么文件上传不能在浏览器上工作，尽管它在 Postman 中工作？答案

【问题标题】：Why won't file uploads work on the browser despite it working in Postman?为什么文件上传不能在浏览器上工作，尽管它在 Postman 中工作？
【发布时间】：2022-01-09 22:50:19
【问题描述】：

我不知道为什么在 Postman 上发出 POST 请求时，我通过抓取文件并检索其名称成功地将 URL 存储在数据库中。

但是当我在浏览器上尝试时，我得到一个 500 错误。身份验证令牌正确返回，记录的数据也包含正确的信息，因此我并不完全清楚我做错了什么，即使我的做法与我在 Postman 中的做法完全相同，并且它在那里工作得很好。

在服务器日志中，我看到一条错误消息：Call to a member function getClientOriginalName() on null，但如前所述 - 上传在 Postman 上工作正常。

可能是什么问题？

这是我的 JS：

const [selectedFile, setSelectedFile] = useState(null);
let authToken = localStorage.getItem('token');

const onFormSubmit = (e) => {
    e.preventDefault()
    fileUpload(selectedFile);
}

const onChange = (e) => {
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length) {
        return;
    }
    createImage(files[0]);
}

const createImage = (file) => {
    let reader = new FileReader();
    reader.onload = (e) => {
        setSelectedFile(e.target.result);
    };
    reader.readAsDataURL(file);
}

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

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

    console.log(authToken);
    console.log(formData);
    console.log(headers);

    JSON.stringify(formData);
    axios.post(url, formData, {
        headers: headers
    }).then(resp => {
            console.log(resp);
        }).catch(error => {
            console.log(error);
        });
}

return (
    <form>
       <input type="file" onChange={onChange} name="userUpload" required/>
       <Button variant="primary" onClick={onFormSubmit}>Upload!</Button>
    </form>
);

【问题讨论】：

您在浏览器控制台中检查了 axios xhr 吗？是否使用multipart/form-data？您可以在发布的数据中看到文件吗？该错误意味着 laravel 在尝试访问它期望但实际上并不存在的文件时出现问题。
@ChrisG 在控制台中，我看到了POST http://localhost:8005/api/file-upload 500 (Internal Server Error)。是的，我在发布的数据中看到了该文件。
我猜你的 laravel 代码期望文件的 POST 名称是 userUpload？在这种情况下，您可能需要使用 const formData = {userUpload: selectedFile}（您的 laravel 代码中可能有 $request->get('userUpload')->getClientOriginalName()）
@ChrisG 是的，刚刚尝试过，但仍然得到相同的结果:(
您需要var_dump($request) 或其他方式来了解如何访问该文件。 name 的大小写必须完全匹配。

标签： javascript php reactjs laravel debugging

【解决方案1】：

您应该检查应设置为的标题内容类型多部分/表单数据

【讨论】：