Как передать фото на сервер с использованием api?

Question

[Никита Стечкин]

Делаю запрос на сервер при помощи axios

const sendPhoto = async (e) => {
    e.preventDefault();

    let fd = new FormData();
    fd.append("image", file);

    let data = await axios.post("http://127.0.0.1:8000/api/post", fd);

    return console.log(data.data);
  };

И обрабатываю на сервере

$rules = [
        'image' => "image"
    ];

    $validator = Validator::make($req->all(), $rules);

    if ($validator->fails()) {
        return response()->json(['val' => false, 'img' => $req->image]);
    }

     if (!$req->hasFile('image')) {
         return response()->json(['image' => "undefined", 'img' => $req->image]);
     }

Валидатор выдает ошибку говоря, что я передаю не фото, а строку, hasFile тоже выдает false. Я пробовал менять axios на fetch

const data = await fetch("http://127.0.0.1:8000/api/post", {
       method: "POST",
      body: fd,
    });

     const res = await data.json()

return console.log(res);

Но валидацию на сервере фото все равно не проходит. Еще я пробовал вместо FormData использовать:

headers: {
        "Content-Type": "multipart/form-data",
      },

Но и это мне не помогло

Answer 1

[alvvi]

Но валидацию на сервере фото все равно не проходит. Еще я пробовал вместо FormData использовать:

А почему вместо? И то и другое нужно.

Правильный запрос:

let formData = new FormData();
formData.append('image', file);
axios.post('http://127.0.0.1:8000/api/post',
    formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
 );

На бэке:

if ($request->hasFile('image')) {
  $file = $request->file('image');
}

Ну валидация тоже должна работать, будь то правило image или file.

Comments

[Никита Стечкин]

Сделал, как вы показали, но результат остался прежний

[alvvi]

Никита Стечкин, инспектируйте formData которую отправляете и сам запрос тогда, пока не очевидно в чем проблема.
В $request файл приходит или нет?

[Никита Стечкин]

alvvi, файл есть и в formData и в $request, мне кажется, что проблема в том, что на сервер приходит не сам файл, а только его название, потому что $request->hasFile('image') выдает false, а при вызове методов у $request->file('image') пишет, что нельзя вызвать эти методы у строки

[alvvi]

Никита Стечкин, так значит вы сторку и отправляете. Вы как, собственно, файл получили? Через input[type="file"] ?

[Никита Стечкин]

alvvi, да, проблема оказалось в том, что я оправлял e.target.value, а не e.target.file, спасибо за помощь