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

Делаю запрос на сервер при помощи 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",
      },


Но и это мне не помогло
  • Вопрос задан
  • 63 просмотра
Решения вопроса 1
alvvi
@alvvi
export default apathy;
Но валидацию на сервере фото все равно не проходит. Еще я пробовал вместо 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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы