Предварительный просмотр файлов изображений с помощью ReactJs.

Введение

Вы задавались вопросом о том, как сделать предварительный просмотр загруженных файлов изображений в вашем приложении ReactJs? Изучая ReactJs, важно знать дорожную карту обучения, чтобы быть эффективным и грамотным в создании веб-приложений. Но это нормально — зацикливаться на конкретных задачах, сталкиваться с новыми проблемами и открывать для себя что-то новое, ведь именно это и подразумевает разработка программного обеспечения.

Зачем нужен предварительный просмотр файлов изображений?
Конечно, говоря о пользовательском опыте, как разработчик программного обеспечения и Front End Engineer, желательно и общеизвестно ставить пользователей на первое место и убедиться, что использование приложения является гладким и убедительным.

Использование формы React для загрузки изображений

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

Базовый элемент формы выглядит следующим образом:

<input type='text' />

Таким образом, атрибут type элемента ввода определяет тип информации, которая будет получена от пользователей. В данном случае мы получаем от пользователя тип файла, поскольку изображение является примером файла.

<input type='file' />

Разобравшись с этим, мы хотим погрузиться в ReactJs-часть вещей. Синтаксис форм React имеет большое сходство с HTML5 и Vanilla Javascript, но сбор входных значений немного отличается. Сбор входных значений в ReactJs включает использование одного из хуков React под названием useState.

import React, { useState } from 'react'

function App() {

  const [image, setImage] = useState({})
  return (
    <div className="App">
        <input type='file' onChange={(e) => setImage(e.target.files)} />
    </div>
  );
}

Если посмотреть на код выше, то первая строка показывает импорт крючка React ‘useState’. Также мы имеем объявление нашего функционального компонента App, возвращающего jsx-аспект приложения.

Переменная состояния

Как показано выше, хук useState был использован для создания нашей переменной состояния, которая собирает и сохраняет наш файл изображения из элемента ввода в приложении.

Декларация

const [image, setImage] = useState({})

<input type='file' onChange={(e) => setImage(e.target.files)} />

После добавления изображения из аспекта User, выбранный файл сохраняет внутри состояние изображения, которое будет отображаться в нашем приложении.

Предварительный просмотр изображения

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

import React, { useState } from 'react'

function App() {

  const [image, setImage] = useState({})

  return (
    <div className="App">
        <input type='file' onChange={(e) => setImage(e.target.files)} />
        {
          image && image.length > 0 ?
            <img 
              src={URL.createObjectURL(image[0])}
              alt='Alternate text'
              width={300}
            />
            : null        
        }
    </div>
  );
}

Проверяя код выше, мы отобразили элемент изображения, а также прочитали файл изображения, установив значение источника img с состоянием изображения, а также прочитав URL объекта для интерпретации файла в атрибут source.

Как видно ниже, состояние изображения имеет тип данных Array, а первый элемент массива изображения был передан в качестве аргумента функции URL.createObjectURL().

<img 
    src={URL.createObjectURL(image[0])}
    alt='Alternate text'
    width={300}
/>

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

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

Вы можете протестировать приведенный выше код здесь! —