时间戳

首页 > 解决方案 > 使用 Axios 将图像发布到 laravel 仅将 [目标文件] 作为字符串传递

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

问题描述

我有一个反应应用程序，它是 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',
  }

标签： javascriptreactjslaravelaxios

解决方案

从周围的代码来看，看起来你正在处理append一个数组picture。

API forFormData需要一个File或Blob用于文件上传，所以对于一个数组，它只是把它变成一个字符串。由于您的数组只有一项，因此它变为[object file].

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

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

推荐阅读