Превью файла что это
Не отображаются эскизы картинок в папке (нет превью), вместо них стандартный значок Windows с синим прямоугольником
Ниже рассмотрю варианты, что можно сделать.
Почему не отображаются эскизы (превью) к картинкам/видео
👉 Вариант 1
Для этого достаточно вызвать окно «Выполнить» (сочетание Win+R ) и использовать команду sysdm.cpl (см. скрин ниже). 👇
sysdm.cpl — открываем свойства системы
👉 Вариант 2
Крупные значки, параметры проводника
Отображать значки, а не эскизы
👉 Вариант 3
Возможно, что проводник просто «глючит». Попробуйте его перезапустить.
👉 Вариант 4
Если у вас не отображаются превью картинок с внутренней памяти телефона, фотоаппарата и других аудио-/видео-устройств, возможно, что причина в отсутствие прав (устройство ограничивает возможности Windows, чтобы не аккуратными действиями вы что-нибудь не удалили лишнего. ).
Чтобы решить проблему, можно сделать следующее:
👉 Вариант 5
Возможно, что ваши картинки просто «битые» (например, флешка или диск, на котором они расположены, пришел в негодность и часть файлов стала не читаемая).
Кстати, особенно часто это происходит с SD-карточками в телефоне (у меня на блоге есть отдельная статья, как можно восстановить файлы с поврежденной флешки, ссылка ниже).
Как восстановить фото с MicroSD карты памяти или USB-флешки — [см. пошаговую инструкцию]
👉 Что можно сделать, если вышеперечисленное не помогло
В некоторых случаях восстановить нормальную работу проводника не удается (например, это может быть из-за того, что у вас не официальная версия Windows, а «сборка» от умельцев).
Лучшие программы для просмотра и редактирования изображений — см. мою подборку
Что такое превью
9 ноября 2019 Опубликовано в разделах: Азбука терминов. 42722
Создание собственного канала на популярном и любимом всеми видеохостинге Ютуб не составляет труда даже для начинающих пользователей. Достаточно всего лишь пройти регистрацию, задать настройки и все — можно выкладывать свои творения. Чтобы выложенный ролик смотрелся презентабельно и выгодно отличался от множества подобных, его следует надлежащим образом оформить.
Зачем это нужно
В момент загрузки видеоролика вариация обложки будет предложена системой автоматически. Конечно, можно без раздумий принять и использовать именно ее, но гораздо лучше будет создать специальное изображение собственноручно. Сейчас объясним почему:
Требования к обложке Ютуб-видео
Соблюдение принципов YouTube сообщества — обязательное условие для всех блогеров, ведущих собственные каналы. Их нельзя нарушать, поэтому на превью следует отображать только то, что напрямую связано с происходящим в ролике. С целью привлечения большого количества зрителей, стоит позаботиться об эффектном оформлении. Задействовать фото высокого качества, яркие значки, красивые надписи.
Перед тем как приступать к созданию обложки для видео на Ютуб, нужно удостовериться, что эта возможность открыта для вас. Загружать личные изображения при плохой репутации, не подтвержденном аккаунте или откровенном несоблюдении требований площадки не получится. Чтобы узнать больше, выберите вкладку «Канал» и кликните по «Статусу и функциям». На приложенном ниже примере страницы хорошо видно, что аккаунт подтвержден, а его владелец соблюдает установки сообщества.
Если такая возможность отсутствует, предстоит нажать на зеленую птичку возле обложки канала. После этого на мобильный будет прислано сообщение с кодом, который необходимо будет ввести в открывшемся окне.
Размер
Оптимальная величина для данного видеохостинга — 1280×720 пикселей. Создать превью можно и в большем или меньшем варианте. Главное — соблюдать пропорции 16:9 и помнить, что ширина не должна быть менее 640.
Установленных правил лучше придерживаться, так удастся сохранить хорошее качество при изменении параметров. Перед использованием следует проверить, как будет выглядеть картинка в уменьшенном виде, а также удостовериться, что все детали легко читаемы.
Формат
Видеохостинг работает с JPG, BMP, PNG и GIF, который не может быть анимированным. Если имеющаяся картинка не соответствует ни одному из указанных расширений, надлежит перевести ее в другое посредством программы Фотошоп (или любой другой). Для этого нужно загрузить ее в графический редактор и сохранить в другой форме.
Может быть меньше или равен 2 МБ. При превышении, что случается крайне редко, изображение надлежит пересохранить в JPG.
Как сделать обложку для видео на YouTube
Пора переходить к действиям. Разберемся с принципами работы графического редактора Canva и выясним, чем он может быть полезен. Преимущество его в том, что это бесплатный онлайн-сервис, а поэтому скачивать и устанавливать какие-либо мудреные программы не придется. Единственное, на что предстоит потратить время перед непосредственным созданием превью — это авторизация. После нее сразу же открывается главная веб-страница.
Как создать обложку для Ютуба онлайн в Canva
В первую очередь необходимо запустить редактор и выбрать из перечня доступных подразделов «Соцсети и заголовки писем». Далее обращаем внимание на две вкладки, которые нам нужны. Это «Оформление канала на Ютуб» и «Миниатюра для YouTube». Теперь нажимаем на последнюю и оказываемся на веб-странице с образцами (макетами).
Шаблоны
Использовать можно любой готовый, просто поработав с текстом, изменив цветовую гамму или изображение. Следует помнить, что при задействовании кириллицы не гарантирован ожидаемый результат. Не все шрифты в русской раскладке отображаются столь же красиво, как используемые в «Канве». К слову, их количество также оставляет желать лучшего. Но подыскать что-то подходящее все-таки возможно.
По существу, все макеты представляют собой совокупность отдельных деталей (элементов), которые поддаются редактированию. Так, например, в представленном ниже образце есть возможность изменить желтые треугольники-уголки, основное фото и шрифт.
Текстуры и фон
В качестве фонового изображения прекрасно подойдут доступные фото в Canva. Найти их можно в графе «Элементы» подразделе «Бесплатно». Подбирать следует горизонтальные фотографии, вытянутые в ширину.
Отличным решением станет задействование разнообразных текстур и графических заливок, которые находятся в категории «Фон». На представленном выше примере при создании превью для канала было использовано предварительно подготовленное фото из сети. В этом плане можно не ограничивать свою фантазию, в интернете огромное количество красивых качественных картинок, которые отлично подходят для работы. Достаточно уделить немного времени, подобрать нужные и скачать.
К слову, пользоваться готовыми шаблонами совершенно не обязательно. Неплохой идеей будет сделать фон, используя кадр из самого видеоролика. Правда, чтобы воспользоваться данным вариантом, стоит быть уверенным в высоком качестве изображения.
Использование стоп-кадра
Для начала необходимо внимательно просмотреть запись и определить самые интересные места. Теперь постарайтесь поймать нужный кадр и создать скриншот.
Чтобы сделать обложку на видео в Ютубе, сталось загрузить полученное изображение в графический редактор Canva, добавить ее на пустую заготовку и растянуть при необходимости. Дальнейшее оформление следует производить на свое усмотрение, заручившись фантазией и вдохновением.
Текст на превью
Для создания фоновой подложки необходимо открыть графу «Элементы» и, выбрав квадрат, переместить его на заготовку. Можно изменить оттенок или форму, вытянув блок по низу изображения.
С помощью специального инструмента на панели без труда задается уровень прозрачности (если требуется). На следующем этапе пора добавлять текст на полупрозрачную подложку и придавать ему надлежащий вид. Сделать это удастся посредством задания нужного цвета, регистра или начертания.
Местоположение, форму и оттенок можно менять, перебирая различные варианты.
Для создания сложных геометрических фигур вовсе не стоит подыскивать многоугольники. Достаточно повернуть обычный прямоугольник и сдвинуть его немного в сторону. Прозрачность у фигуры при этом равна нулю.
С помощью уже знакомой графы «Элементы» получится с легкостью добавить рамку или превратить прямоугольник в круг. Дело сделано — обложка готова.
Вообще, нюансы и направление оформления во многом зависят от модных тенденций определенного времени. Так, например, если на пике популярности контент о школьном и подростковом периодах, особенно привлекательными для аудитории выступают яркие краски. Поэтому, пестрыми разноцветными обложками стараются привлечь к себе внимание зрителей даже те каналы, которые совершенно далеки от этой тематики. И главное в такой ситуации — соблюдать золотую середину. Помнить о том, что привлекать посетителей должен один ярко выраженный элемент: картинка, текст или графика. Все вместе выглядит отталкивающе.
Как поставить обложку на видео в Ютубе
Данный процесс подразумевает поэтапное выполнение ряда действий.
Для начала нужно запустить видеохостинг, и выбрать пункт, указанный на скриншоте ниже.
Теперь возле видеоролика, на котором необходимо заменить картинку, активируйте раздел «Изменить» и во всплывающем перечне функций нажмите на «Информацию и настройки».
В открывшемся редакторе среди представленных кадров надлежит кликнуть на «Свой значок». Эта кнопка находится справа.
В «Проводнике» предстоит указать путь к файлу, который нужно задействовать в качестве превью. Выбрав изображение, остается только нажать кнопку «Открыть».
На загрузку потребуется 5-10 секунд, после чего подобранная картинка превратится в обложку. При нажатии «Опубликовать» все внесенные изменения сохраняются. Поэтому, не стоит забывать своевременно вносить необходимые данные в пустые поля в редакторе.
Плохие и хорошие примеры
На видеохостинге огромное количество роликов, но не все из них могут похвастаться эффектным выразительным содержанием. Почему так происходит? Все просто, далеко не каждый владелец канала стремится узнать, как делать превью для видео на YouTube правильно. В завершающей главе разберемся, что нужно предпринять, чтобы привлечь посетителей своим видеороликом, а от чего лучше вовсе отказаться.
Сначала перечислим, какие детали можно задействовать на изображении:
Теперь рассмотрим, чего стоит избегать при оформлении обложки:
В завершении хочется еще раз напомнить, просто знать, что такое превью на Ютубе — не достаточно для эффективного продвижения канала. Необходимо понимать, какие функции выполняет обложка, уметь оформлять ее правильно и тем самым привлекать внимание большого числа зрителей. Надеемся, сегодняшние наши рекомендации окажутся для вас полезными.
Что такое превью?
Что важно при знакомстве с чем-то новым? Правильно. Первое впечатление. Это касается не только человека, но и любой другой услуги или товара, который предлагается на рынке. Чтобы на вас обратил внимание пользователь, нужно эффективное, оригинальное, отличающееся от других превью или обложка. Ниже мы расскажем вам о том, как это оформить выгодно с точки зрения маркетинга.
Превью: реклама и маркетинг
Начнем с понятия. Превью – это заставка или обложка для предварительного просмотра, в которой можно проследить суть передаваемой информации. Чаще всего превью можно встретить на видеороликах в YouTube. Это, своего рода, рекламная подача, рассказ о том, что будет показано в дальнейшем при открытии ролика. Качество выполнения обложки будет напрямую влиять на дальнейшее желание пользователя посмотреть ваше видео.
Невозможно спорить о том, что внешняя оболочка оказывает огромное влияние на лояльность потребителей. Мы не купим кофточку в магазине, если ее внешний вид не соответствует нашим ожиданиям. Аналогичным способом выбираются видео для просмотра на различных площадках. Люди обратят внимание, скорее, на провокацию, интригу и захватывающие изображения, нежели просто на название видеоролика с вставленным скрином из него. Опытные интернет маркетологи знают о том, что на эмоциональную составляющую любого человека можно воздействовать с помощью уникальной, неординарной, цепляющей «оболочки» товара.
Зачем это нужно?
При загрузке видеоролика, вам может быть системой автоматически предложена заставка. Конечно, можно не заморачиваться и установить ее, но гораздо выгоднее будет создать изображение самостоятельно.
Основные принципы создания превью для видео YouTube
Превью на YouTube – это миниатюра, которая устанавливается в качестве обложки на видеоролик. Обязательным условием для всех ютуберов является следование определенным принципам сообщества видеохостинга, которые позволят привлечь внимание большего количества посетителей и увеличить кликабельность. Этого можно добиться с помощью использования качественных фото, уникальных значков и красивых текстовых вставок.
Перед тем, как начать создание оригинального превью, стоит убедиться в том, что для вас эта возможность открыта. Загрузить изображения с неавторизованного аккаунта или для пользователей с плохой репутацией не представляется возможным. Чтобы определить, насколько вероятно установить собственное изображение на заставку видео, нажмите «Канал» и кликните по «Статус и функции». Это позволит вам увидеть подтвержденный или неподтвержденный аккаунт.
Если такой ход действий выполнить невозможно, то просто нажмите на зеленую птичку возле обложки канала. После этого вам вышлют на прикрепленный номер телефона специальный код, который вы введете в открывшемся окне.
После того, как вы определили, что можете самостоятельно создавать для своего YouTube — канала превью, необходимо разобраться с основными техническими требованиями или рекомендациями, которые необходимо применить при разработке обложки.
Размер
Оптимальная величина изображения для видеохостинга YouTube — 1280×720 пикселей. Можно разрабатывать превью и в других размерных вариациях, но главное – следовать пропорциям 16:9 и помнить, что ширина картинки не должна быть меньше 640.
Это правило позволит вам сохранить качество изображения при изменения некоторых параметров. Перед использованием следует убедиться в читабельности текстовых элементов на картинке и хорошем внешнем виде при ее уменьшении.
Важно: изображения для канала YouTube 2560×1440 и 2048×1152 не подходят для превью. Это величина для баннера шапки.
Формат
Видеохостинг работает с форматами изображений JPG, BMP, PNG и GIF без возможности анимирования. Если ваша картинка не подходит для указанных расширений, необходимо перевести ее в нужный формат с помощью графических редакторов. То есть нужно загрузить будущее превью в любой фоторедактор, а далее сохранить его в требуемой форме.
Изображение для превью обычно равно 2 Мб или меньше. При превышении изображение следует пересохранить в формате JPG.
Создание обложки для видео на YouTube
С основными параметрами разобрались, теперь пора переходить к конкретному процессу разработки превью. Мы дадим вам несколько советов которые помогут без проблем создать цепляющую обложку.
Правило 1. Используйте только крупные объекты и изображения
У вас не будет второго шанса произвести первое впечатление. Одного скользящего взгляда на превью пользователю должно хватить, чтобы он понял, о чем в видео будет рассказываться. Если это выступление специалиста в какой-нибудь области или интервью, можно в качестве превью использовать крупное изображение спикера; если в видеоролике помещены обзоры, то на заставке следует разместить изображение рассматриваемого товара.
Важно:
Правило 2. Добавьте заголовок-крючок в превью для видео
Какую бы классную картинку вы бы не вставили в превью, текст остается самым быстрым и результативным способом передачи информации зрителю. В превью напишите, о чем будет рассказываться в видео. Желательно крупным, понятным шрифтом. Коротко. Заинтересованный пользователь обязательно кликнет на такой видеоролик.
Чтобы заголовок был релевантен, можно воспользоваться услугами сервиса поиска и подбора ключевых слов.
Важно:
Правило 3. Единое стилевое оформление канала
Каждая обложка должна быть похожа на все остальные по дизайнерскому оформлению. Это может быть единый шрифт, цвет или расположение элементов изображения. Почему это важно? Во-первых, это просто красиво выглядит, а во-вторых, пользователь на уровне инстинктов воспринимает это, как что-то уже знакомое. А значит это приведет к клику на ваше очередное видео-творение.
Важно:
Правило 4. Не бойтесь сервисов
Не думайте, что все оригинальные превью создаются уникальными дизайнерами. Сегодня интернет пестрит достаточным количеством бесплатных сервисов, которые помогут разработать работающую обложку для вашего канала.
Наиболее легким и многофункциональным вариантом является графический редактор Canva. Также можно воспользоваться и другими не менее популярными сервисами для создания изображений.
Все, теперь фантазии есть, где разгуляться. Применяйте наши советы и создавайте свое собственное превью, которое приведет вас к нужному результату.
Внедрение обложки на Ютуб
После создания превью необходимо разместить ее на вашем канале. Данный процесс подразумевает поэтапное выполнение ряда действий:
Через 5 секунд ваша картинка превратится в полноценную заставку. После чего следует сохранить внесенные изменения, нажав на «Опубликовать».
Все просто и предельно понятно. А самое главное – эффективно.
Чего следует избегать при создании личного превью?
Многие совершают банальные ошибки при разработке обложки к видео. Чтобы их предотвратить, обратите внимание на нижеописанные советы рекомендательного характера:
Не отодвигайте на второй план этот важный маркетинговый элемент – превью. Внимание зрителей привлечь не так просто, а удержать – еще сложнее. Воспользовавшись нашими советами, можете смело ставить зеленую галочку на первом пункте. Пользователь заинтересован. Дальше дело рук опытного маркетолога.
Предварительный просмотр загружаемых файлов с помощью Axios и VueJS
Ранее я написал небольшую статью о загрузке файлов с помощью VueJS и Axios, которая должна помочь облегчить некоторые трудности при создание загрузки файлов. Так же была статья о отображение прогресса при загрузке файлов с помощью Axios. Теперь пришло время добавить несколько наворотов и немного улучшить UX. В этом уроке мы будем создавать превью загрузки картинок.
Предварительные условия
Как и в предыдущих статья, я собираюсь использовать Axios v0.16.2 и VueJS v2.1.0 для выполнения фронтальной части загрузки файлов.
Для предварительного просмотра файлов мы будем использовать FileReader API: FileReader — Web APIs | MDN. На этом сайте есть отличный обзор FileReader и примеры его работы. Я адаптировал большую часть примеров для работы с VueJS и Axios.
FileReader позволяет нам прочитать файл, выбранный пользователем в качестве большого двоичного объекта, и просмотреть его в браузере. Мы будем использовать это для отображения изображений, но я уверен, что это может быть адаптировано для PDF-файлов и других типов файлов, доступных для просмотра в браузере. В этом уроке мы будем работать только с изображениями.
Предварительный просмотр отдельно загружаемых изображений
Первый компонент, который мы создадим, позволит пользователям просматривать предварительное изображение выбранного ими файла изображения.
Создания компонента FilePreview.vue
Для этого урока я создал простой компонент Vue с именем FilePreview.vue со следующим содержимым шаблона:
Несколько замечаний по поводу шаблона. У нас есть input типа file, который имеет различные атрибуты. Первым, что мы отметим, это атрибут ref=»file». Через него мы получим доступ к выбранным файлам следующим образом:
Другим атрибутом является атрибут accept=»image/*». Он ограничивает загрузку только файлами изображений. Для создаваемой нами функции предварительного просмотра мы хотим, чтобы пользователи загружали только изображения, чтобы мы могли показать их содержимое.
Наконец, у нас есть атрибут v-on:change=»handleFileUpload()». Когда пользователь загружает файл и содержимое input изменяется, мы вызываем наш метод handleFileUpload(). Это позволит нам прочитать файл с помощью FileReader() и отобразить изображение пользователю.
Шаблон также содержит элемент img. Через этот элемент мы отобразим выбранный файл. У него есть два атрибута. Во-первых, это привязка атрибута src с помощью v-bind:src=»imagePreview». Это, связывает src изображения с переменной imagePreview (обсудим позже в этом уроке). Вторым атрибутом является v-show=»showPreview». Он определяет, должны ли мы показать предварительный просмотр изображения или нет. Это полезно для улучшения UX. В случае если не будет ничего выбрано, в нашем предварительном просмотре ничего не будет отображаться. Мы установим эту переменную по умолчанию в значение false, чтобы оно не отображалось на следующем шаге. Когда пользователь выбирает файл, мы переключим его на true.
В шаблоне также есть элемент button. При нажатии он отправит файл для обработки сервером с помощью метода submitFile().
Добавим data в компонент
Далее мы создаем FileReader() объект. Более подробно об этом описанно здесь: FileReader — Web APIs | MDN.
FileReader() будет использоваться для чтения выбранного пользователем файла и создания предварительного просмотра изображения.
Затем мы добавляем event listener в наш FileReader() для события загрузки load:
Мы делаем это потому, что хотим узнать, когда файл завершил загрузку, а затем показать его пользователю. С нашим event listener мы используем .bind (this), который дает нам доступ к переменным нашего локального компонента Vue. Когда вызывается событие load, мы показываем изображение для предварительного просмотра и устанавливаем изображение в соответствии с тем, что было прочитано.
Наконец, мы читаем файл после нескольких проверок достоверности:
Сначала мы проверяем, существует ли файл в file или имеет ли он значение NULL, то есть пользователь выбрал файл но он по каким то причинам не загрузился. Поскольку метод был вызван при загрузке файла, он должен быть там, но это простая проверка, чтобы убедиться, что мы не столкнемся с проблемами позже. Далее мы проверяем, что файл является изображением. Мы проверяем его имя на соответствующее расширение изображения. Если это изображение, то мы наконец читаем его:
Это запускает чтение загруженного пользователем файла, и когда оно будет завершено, запуститься событие load, которое мы слушаем, и в котором, мы покажем предварительное изображение.
Конечно, стоит добавить несколько стилей к тегу img, возможно, установить максимальную ширину или высоту, что бы, если пользователь загружает большой файл, оно не стало занимать весь экран, но в этом примере мы рассмотрим только функциональную часть. Далее выполним отправку файла на сервер.
Добавляем метод submitFile()
Это последний метод, который нам нужно будет добавить к объекту methods. Этот метод вызывается когда пользователь выберет файл и нажмет кнопку отправки. Мы будем использовать FormData() FormData — веб-API | MDN, как и прежде, чтобы отправить файл на сервер.
В начале мы инициализируем наш объект FormData().
Далее мы добавляем локальную переменную file к объекту formData:
Здесь можно добавить любые другие данные, которые мы хотим отправить вместе с файлом выбранного изображения.
Далее мы делаем запрос к серверу, используя Axios:
Первый параметр в методе axios.post() — это URL, куда мы будем отправлять наши данные. В моей тестовой среде я настроил конечную точку на API с именем /file-preview, который принимает с POST запрос. Второй параметр — это данные, которые мы отправляем на сервер. В данном случае это переменная formData. Третий параметр — это дополнительные настройки для запроса. Они чрезвычайно важны, так как нам нужно добавить заголовок ‘Content-Type’: ‘multipart/form-data’. Этот заголовок предупреждает сервер о том, что у нас есть данные формы и что они могут содержать файлы. Так же далее было указаны два обратных вызова. Один отработает в случае успеха и второй в случае неудачи передачи данных. Они ничего не делают, кроме вывода сообщения в консоль. Наш компонент на данный момент завершен, и вы можете проверить как работает предварительный просмотр загрузки файла для ваших пользователей!
Окончательная версия файла FilePreview.vue должна выглядеть следующим образом:
Далее мы создадим компонент для загрузки и просмотра нескольких файлов! Концепции остаются прежняя, но есть несколько отличий.
Предварительное отображение загрузки нескольких файлов
Несколько файлов всегда представляют собой уникальную проблему. В этом случае нужно отображать все выбранные файлы. Конечно, вы всегда можете добавить способ удаления файлов перед загрузкой, как мы делали в предыдущем уроке: Загрузка файлов с помощью VueJS и Axios. В данном случае мы просто позволим пользователям загружать столько изображений, сколько они хотят, и отобразим предварительный просмотр каждого изображения.
Первое, что мы сделаем, это создадим файл FileMultiplePreview.vue, который будет обрабатывать все файлы предварительного просмотра.
Добавим шаблон и стили для загрузки нескольких файлов
Первое, что мы сделаем, это добавим шаблон для предварительного просмотра файлов:
Сначала мы добавили несколько стилей, необходимых для функциональности. Скрыли input со страницы, и при клики на кнопку Add Files, мы запускаем событие клика на элементе input, чтобы вызвать выбор файла. Мы сделали это, для организации более понятного интерфейса. Еще один стиль — просто устанавливает максимальную ширину изображения.
Если мы посмотрим на input в шаблоне, вы увидите несколько новых атрибутов:
Во-первых, и самое незначительное, мы изменили атрибут ref на files вместо file. Наиболее важным атрибутом является атрибут multiple, который позволяет пользователям выбирать несколько файлов. Мы также сохранили атрибут accept=»image/*», который позволяет пользователю загружать только изображения. Наконец, мы указали обработку загрузки с помощью метода v-on:change=»handleFilesUpload()».
Далее вы видите итератор VueJS, который перебирает загруженные файлы и отображает предварительный просмотр:
Далее у нас есть кнопка добавления файлов:
Это позволяет пользователю добавлять исходные файлы и даже больше после их первоначального выбора. Каждый раз, когда пользователь добавляет файлы, они помещаются в массив локальных файлов, который запускает реактивный рендеринг через VueJS и отображает предварительный просмотр.
Наконец, у нас есть кнопка отправки, которая просто отправляет файлы на сервер:
Мы рассмотрим все эти методы и объясним, как они работают в следующих шагах.
Добавим data
Внутри этого метода мы ссылаемся на наш глобальный объект $refs с помощью ключевой ссылки, сгенерированной в нашем шаблоне. Когда мы перебираем изображения, индексы совпадают, и мы можем отобразить предварительный просмотр для каждого изображения.
Наконец, мы вызываем метод чтения файла:
Он будет читать файлы по ключу в массиве. Когда файл будет загружен, запустится событие load и установится src тега изображения в массиве $refs с индексом, в котором он находится.
Вот и все, я очень быстро пробежусь по остальным методам, но они очень похожи на те, что обсуждались в предыдущем уроке. Теперь вы можете отображать изображения для превью нескольких загруженных файлов!
Метод addFiles()
Этот метод вызывается, когда пользователь нажимает кнопку Add Files. Метод должен выглядеть так:
Что это делает, запускает события клика на input, чтобы предложить пользователю загрузить файлы. Таким образом, мы можем скрыть input с экрана и создать приятный интерфейс.
Метод submitFiles()
Этот метод обрабатывает отправку файлов на сервер для обработки. Метод должен выглядеть так:
В первой части метода мы инициализируем FormData(), которая будет хранить все данные, которые мы отправляем на сервер.
Затем мы перебираем все файлы и добавляем их в только что созданную переменную formData.
Это создает массив файлов, которые мы отправляем на сервер.
Наконец, мы отправляем файлы на сервер:
Для этого примера я только что создал конечную точку в своем API с URL /file-multiple-preview. Затем я передал formData методу axios.post() в качестве второго параметра. Если бы были какие-либо другие поля формы, вы могли бы добавить их в переменную formData. Третий и последний параметр является объектом конфигурации для запроса. Все, что я добавил здесь, это заголовок для предупреждения сервера о возможных файлах.
Я также добавил метод обработки в случае успеха, который выводит сообщение в консоль и метод перехвата любых неудачных запросов. Они должны быть настроены в зависимости от ваших потребностей и реализации.
Наш последний компонент FileMultiplePreview.vue должен выглядеть следующим образом:
Если у вас есть какие-либо вопросы, обязательно дайте мне знать!
Заключение
Эта статья поможет добавить еще несколько наворотов при загрузке файла с AJAX с использованием VueJS и Axios. Предварительный просмотр изображений очень полезен при создании удобного пользовательского интерфейса.