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

Question

我不确定为什么在 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>
);

Answer 1

您应该检查应设置为 multipart/form-data 的 header 内容类型