使用 Axios 将图像发布到 laravel 仅将 [目标文件] 作为字符串传递答案

【问题标题】：Posting image to laravel with Axios only passing [object file] as string使用 Axios 将图像发布到 laravel 仅将 [目标文件] 作为字符串传递
【发布时间】：2019-10-31 07:44:00
【问题描述】：

我有一个 react 应用程序，它是 laravel 应用程序的前端。我正在使用一个简单的图像上传器，它将上传的文件返回到发布路径。在 post 路由的控制器中，请求以字符串而不是实际对象的形式传入。查看我的代码。

onUpload = (picture) => {
    this.setState({
        pictures: this.state.pictures.concat(picture),
    });

    var curr = this

    const formData = new FormData();
    formData.append('file',picture)
         console.log(picture[0])

        axios
        .post('/upload-subitem-image', formData, fileHeaders)
        .then(function (response) {

            const data = response.data

                    console.log(data)

        })
        .catch(error => {
            console.log(error);
        })
}

当我控制我得到的图片对象时

File {name: "test.png", lastModified: 1553443959805, lastModifiedDate: Sun Mar 24 2019 12:12:39 GMT-0400 (Eastern Daylight Time), webkitRelativePath: "", size: 11695, …}

但是在将它传递给 laravel 以尝试获取文件后，当我尝试执行此操作时它会返回一个字符串。

 $data = $request->File();

看起来像

{file:{"[object file]"}

标题如下所示：

const fileHeaders = {
'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'content-type': 'multipart/form-data',
'Accept': 'application/json',
  }

【问题讨论】：

How to post a file from a form with Axios的可能重复
另一个similar question thread。

标签： javascript reactjs laravel axios

【解决方案1】：

从周围的代码来看，你似乎在append-ing 一个数组picture。

FormData 的 API 需要 File 或 Blob 用于文件上传，因此对于数组，它只是将其转换为字符串。由于您的数组只有一项，因此它变为[object file]。

尝试在append 中执行picture[0]（并确保进行适当的边界检查等）

参考：https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects#Sending_files_using_a_FormData_object

【讨论】：

方向正确，但现在是空的 - {file: {…}}
参考cmets部分链接的其他帖子，您可能需要正确设置content-type。
为了进一步调试这个，你应该做的下一步可能是检查传出请求（例如在浏览器网络检查器中）并确保帖子正文包含文件数据。如果是这样，那么您可能需要在服务器端修复一些问题。
文件：（二进制）这就是现在的请求
这看起来是正确的行为。您需要弄清楚您想在 PHP 中使用该二进制文件做什么。

【解决方案2】：

最终在 php 中向控制器添加了一些东西。

$data = $request->all();
$file = $data['file'];

【讨论】：