24. React + Node.js - Загрузка\удаление аватарки пользователя - Облачное хранилище

YOUTUBE · 26.11.2025 05:20

Ключевые темы и таймкоды

Создание аватара пользователя

0:03

В предыдущем уроке был создан сервер, который загружает и удаляет аватарки пользователей.
В этом уроке будет показано, как это сделать на клиентской части приложения.
Создается компонент у navbar, где при авторизации пользователя появляется изображение его аватара.
Если у пользователя нет аватара, используется дефолтная иконка.
Импортируется дефолтная иконка из папки с изображениями.

Создание аватара и его отображение

1:02

Создается файл конфига, где указывается текущий адрес сервера.
Если аватар пользователя не пустой, к адресу сервера добавляется аватар пользователя.
В противном случае используется дефолтная иконка.
Аватар пользователя оборачивается в компонент и становится ссылкой.
При нажатии на аватар пользователя открывается страница профиля.

Создание страницы профиля

2:01

Создается новая компонента для страницы профиля.
В ней есть кнопка для удаления аватара и input для загрузки нового аватара.
Создается новый маршрут, который отрабатывает только при авторизации пользователя.

Рефакторинг кода

3:01

В экшенах для пользователя заменяются адреса сервера и ёрл.
В экшене загрузки аватара исправляются названия и тип запроса, а также исправляются ошибки.
В экшене удаления аватара исправляются названия и тип запроса.

Реализация событий на странице профиля

4:57

В компоненте профиля реализуются события на кнопку и input.
При нажатии на кнопку вызывается функция удаления аватара, а при выборе файла в input вызывается функция загрузки аватара.
В стилях задается фиксированная высота и ширина аватара, а также border-radius для округления изображения.