Использование заголовка multipart / form-data для загрузки файлов с использованием vuejs, laravel, axios приводит к 401

Question

Я пытаюсь загрузить файл, используя библиотеку axios.

axios.post('/images/upload', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
  }).then( response => console.log(response))

Route::middleware('auth:api')
 ->group( function() {
  Route::post('/images/upload', 'ImageController@store');
})

Я получаю следующую ошибку с кодом состояния

{"message": "unauthenticated"}

В тот момент, когда я удаляю часть заголовка, т.е. «multipart / form-data», запрос проходит, но это не так, потому что мне также нужно отправить файл.

Answer 1

Я обнаружил проблему при попытке воспроизвести это

Отправить заголовок Bearer с api_token в заголовке

, например,

<meta name="csrf-token" content="{{ csrf_token() }}">
<div id="app">
    <input type="file" name="image" id="image" onchange="upload()">
</div>

<script src="{{ asset('js/app.js') }}" defer></script>
<script>
    function upload() {
        let image = document.getElementById('image').files[0];
        let formData = new FormData();
        formData.append('image', image);
        axios.post('/images/upload', formData, {
            headers: {
                'Content-Type': 'multipart/form-data',
                'Authorization': 'Bearer {{ auth()->user()->api_token }}',
            }
        }).then( response => console.log(response))
    }
</script>

Предполагая, что функция контроллера похожа наthis

public function store(Request $request)
{
    $path = $request->file('image')->store('public');
    return $path;
}

Вы получите сохраненный URL-адрес изображения в ответе

Надеюсь, это поможет:)