Создание классного загрузчика аватаров профиля REST с помощью Laravel, Vue и Axios.

В этом посте я продемонстрирую, как вы можете создать “ТЕСТОВЫЙ” загрузчик аватаров профиля, используя VueJS и http-клиент axis с использованием серверной части Laravel. Кроме того, я продемонстрирую, как вы можете добавить прогресс загрузки файла, чтобы улучшить всю функцию. Ради этого поста я предположу, что вы знакомы со средами Laravel и Vue, если не перейдете по этим ссылкам: Vue , Ларавель .

Поскольку мы будем загружать файлы, в данном случае изображения профиля, мы сначала создадим диск на Laravel, на котором будут храниться эти файлы в нашем проекте. Перейдите в файл конфигурации файловой системы и добавьте следующий код в массив диски .

// config/filesystems.php

    'user_avatars' => [
        'driver' => 'local',
        'root' => storage_path('app/public/user-avatar'),
        'url' => env('APP_URL').'/storage/user-avatar',
        'visibility' => 'public',
    ],

В приведенном выше коде мы добавили новый диск под названием “user_avatars”, корневым каталогом которого будет приложение/общедоступный/аватар пользователя, а общедоступный URL-адрес будет “APP_URL/хранилище/аватар пользователя/ИМЯ_ФАЙЛА_ИЗОБРАЖЕНИЯ”.

Создайте новую папку в каталоге storage\app\public, где будут храниться успешно загруженные изображения аватаров, и назовите ее пользователь-аватар .

Затем создайте метод, который будет обрабатывать загружаемые файлы. Где бы ни находился контроллер, метод должен иметь следующую логику:

public function upload_user_photo(Request $request){
    // check if image has been received from form
    if($request->file('avatar')){
        // check if user has an existing avatar
        if($this->guard()->user()->avatar != NULL){
            // delete existing image file
            Storage::disk('user_avatars')->delete($this->guard()->user()->avatar);
        }

        // processing the uploaded image
        $avatar_name = $this->random_char_gen(20).'.'.$request->file('avatar')->getClientOriginalExtension();
        $avatar_path = $request->file('avatar')->storeAs('',$avatar_name, 'user_avatars');

        // Update user's avatar column on 'users' table
        $profile = User::find($request->user()->id);
        $profile->avatar = $avatar_path;

        if($profile->save()){
            return response()->json([
                'status'    =>  'success',
                'message'   =>  'Profile Photo Updated!',
                'avatar_url'=>  url('storage/user-avatar/'.$avatar_path)
            ]);
        }else{
            return response()->json([
                'status'    => 'failure',
                'message'   => 'failed to update profile photo!',
                'avatar_url'=> NULL
            ]);
        }

    }

    return response()->json([
        'status'    => 'failure',
        'message'   => 'No image file uploaded!',
        'avatar_url'=> NULL
    ]);
}

Краткое описание метода upload_user_photo() : сначала мы проверяем, было ли изображение отправлено в данных формы, а затем удаляем существующее изображение пользователя с диска user_avatars . Далее мы генерируем случайное имя для изображения, используя вспомогательный метод random_char_gen() . Затем мы сохраняем загруженное изображение на диске user_avatars и обновляем столбец аватара пользователя новым общедоступным URL-адресом изображения. Наконец, метод возвращает соответствующий ответ json.

Кроме того, добавьте новый маршрут публикации, по которому будет размещено изображение.

// routes/web.php
Route::post('upload_avatar', 'Controller@upload_user_photo');

Настраиваясь на стороне javascript, начните с установки axios для управления http-запросами.

$ npm i axios

Создайте Компонент изображения аватара.vue Компонент Vue и поместите в него следующий код.

Что происходит в этом компоненте, так это то, что при запуске события onchange при вводе файла выбранное изображение упаковывается в объект FormData и отправляется на сервер по маршруту загрузки изображения. Мы прослушиваем событие прогресса axios и обновляем процент загрузки . При успешной загрузке изображения мы обновляем avatarImageUrl впоследствии обновляем отображаемое изображение аватара, при сбое мы регистрируем вывод ошибки без изменения отображаемого текущего изображения профиля.

Попробуйте реализовать это и не стесняйтесь задавать вопросы.

Оригинал: “https://dev.to/xinnks/creating-a-cool-rest-profile-avatar-uploader-with-laravel-vue-and-axios-531f”