Загрузка файла с использованием .fetch () в ReactJS

Question

Я пытаюсь загрузить файл, используя .fetch() в ReactJS в качестве внешнего интерфейса и 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);
        }
    }

Я получаю ошибку, как показано ниже

и

В чем проблема?

Answer 1

Это потому, что вы загружаете изображение с именем поля формы avatar, но в вашем методе Laravel вы получаете к нему доступ с помощью uploadImage.

Так что вы можете попробовать изменить его на следующее:

$request->avatar

Пожалуйста, ознакомьтесь с документацией Laravel Files и убедитесь, что вы следуете их рекомендациям.