在ReactJS中使用.fetch()上传文件

时间:2018-06-07 08:42:03

标签: reactjs file-upload multipartform-data

我正在尝试使用ReactJS中的.fetch()作为前端和Laravel作为后端上传文件。我的ReactJS代码如下所示

update= (event) => {
let uploadImage =  event.target.file;
let form = new FormData()
form.append('uploadImage',uploadImage)

fetch('http://127.0.0.1:8000/api/addresses/upload', {
  headers: {
    'Authorization': 'Bearer ' + Auth.getToken(),
    'Content-Type': 'multipart/form-data',
  },
  method: "POST",
  body: form,
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}

我的Laravel代码如下所示

public function fileUpload(StoreImageRequest $request)
    {
        $image           = $request->uploadImage;
        $imagename       = time() . $image->getClientOriginalName();
        $destinationPath = public_path('/images');
        $uploadValue     = $image->move($destinationPath, $imagename);
        if ($uploadValue) {
            return response()->json($imagename);
        }
    }

我收到如下错误

enter image description here

enter image description here

enter image description here

问题出在哪里?

2 个答案:

答案 0 :(得分:1)

这是因为您上传了表单字段名称为avatar的图片,但在您的Laravel方法中,您可以使用uploadImage访问该图片。

因此,您可以尝试将其更改为以下内容:

$request->avatar

请结帐the Laravel Files documentation并确保遵循他们的最佳做法。

答案 1 :(得分:0)

我有同样的问题。我通过删除内容类型对其进行了修复。

请查看这篇文章

https://upmostly.com/tutorials/upload-a-file-from-a-react-component