Загрузка файлов с помощью VueJS и Axios - серверная сторона вверх
В этом руководстве мы рассмотрим основы загрузки файлов с помощью Vue.js и GitHub - axios / axios: HTTP-клиент на основе Promise для браузера и node.js. Мы начинаем с простой загрузки одного файла, расширяем его, позволяя пользователям выбирать сразу несколько файлов, а затем заканчиваем предоставлением пользователям возможности выбирать несколько файлов и удалять файлы перед их отправкой на сервер. Удаление файлов перед отправкой на сервер - это своего рода трюк, но, надеюсь, это поможет пройти весь процесс.
Предварительный просмотр загружаемых файлов с помощью Axios и VueJS
В этом руководстве добавлена замечательная функция, которая позволяет пользователю предварительно просмотреть файл (если это изображение) перед его загрузкой на сервер. Это простая настройка UX, но с добавлением интересных трюков. Это основано на наших последних руководствах и дает пример с отдельными файлами и несколькими файлами предварительного просмотра. Как и в случае с несколькими файлами, здесь есть несколько уловок, так что, надеюсь, это поможет!
Индикатор загрузки файла с помощью Axios и VueJS
Еще одна интересная функция, которую мы можем добавить, - это возможность добавить индикатор выполнения для загрузки файлов. Это предупреждает пользователя о ходе загрузки. Это довольно просто, но приятно для UX.
Перетаскивание файлов при загрузке с помощью VueJS и Axios
Это заключительная статья, в которой мы не только используем все функции из предыдущих статей, но и добавляем функцию перетаскивания. Мы основываемся на Освальдасе Валутисе и его гостевом посте о трюках с CSS: Перетаскивание файлов | CSS-хитрости . Загрузчик файлов перетаскиванием адаптирован для работы с VueJS и Axios и обеспечивает удобное взаимодействие с пользователем с множеством возможностей для расширения.
Конечно, если у вас есть какие-либо вопросы или вам нужна помощь, не стесняйтесь оставлять комментарии ниже, и я свяжусь с вами, как только смогу!
