Одна из самых больших головных болей в моей молодой карьере разработчика программного обеспечения - найти лучший способ разрешить пользователям загружать изображения в веб-приложение, над которым я работал. Моя первая попытка была связана с ванильным JS и попыткой сохранять изображения непосредственно в моей внутренней базе данных ... если только вам не нужно делать это таким образом, не изобретайте заново колесо, найдите другое решение (в итоге мы загрузили наши файлы в хост и прямая ссылка на них). Во второй раз я подумал: «Давайте попробуем AWS S3, я вижу много сайтов, на которых размещаются изображения» - и хотя S3 является вполне допустимым и, вероятно, отличным решением, когда вам нужно быстро создать рабочий сайт, что-то более легкое. в плане комплектации востребован.
Войти в стек
Проведя больше времени, чем следовало, пытаясь осмыслить S3, один из моих одноклассников подсказал мне Filestack (в частности, filestack-react), который очень просто настроить - я сделал это гораздо реже. времени, чем у меня уйдет на написание этого сообщения в блоге. Прежде чем начать, вам нужно будет зарегистрировать аккаунт на filestack.com, чтобы получить ключ API. Вы можете бесплатно подписаться на план для разработчиков, который включает в себя более чем достаточную пропускную способность и загрузку, чтобы увидеть вас на этапе разработки проекта.
Далее, если у вас уже есть приложение React, над которым вы работаете, вам просто нужно установить пакеты с
yarn add filestack-react filestack-js or npm install filestack-react filestack-js
После того, как вы установили необходимые пакеты, импортируйте Filestack в компоненты, в которые вы будете добавлять его с помощью
import ReactFilestack from 'filestack-react'
Теперь мы готовы разместить что-то на странице - компоненту Filestack требуется только одна опора, apikey, но она не так полезна без пары дополнительных. Вот базовая конфигурация, которую я использовал:
<ReactFilestack
apikey={keys.filestackKey}
buttonText="Upload Photo"
buttonClass="ui medium button gray"
options={basicOptions}
onSuccess={this.onSuccess}
onError={this.onError}
/>
keys.filestackKey относится к файлу, из которого я импортирую свой ключ - вы можете просто поместить ключ прямо здесь, но вы знаете, что это лучше, не так ли? buttonText и buttonClass являются чисто косметическими, устанавливая текст на кнопке, которая открывает загрузчик Filestack, и в этом случае назначаем классы, чтобы кнопка соответствовала семантическим компонентам пользовательского интерфейса, которые я использую для остальной части этой формы. onSuccess и onError должны указывать на функции обратного вызова, которые будут обрабатывать ответ от Filestack:
onSuccess = (result) => {
this.setState({
url: result.filesUploaded[0].url
})
}
onError = (error) => {
console.error('error', error);
}
Функция onSuccess здесь просто сохраняет URL-адрес, возвращенный из Filestack, в состояние компонента, которое будет сохранено в моей базе данных при отправке формы. onError просто отправляет на консоль любые потенциальные сообщения об ошибках ... обрабатывайте ошибки, как вы считаете нужным.
Наконец, опция options принимает объект с, да, как вы уже догадались, параметрами. Я решил настроить его так, чтобы разрешить только один файл изображения из локального хранилища размером не более 1024x1024, который я установил в переменной, определенной вне return в методе визуализации моей формы:
const basicOptions = {
accept: 'image/*',
fromSources: ['local_file_system'],
maxSize: 1024 * 1024,
maxFiles: 1,
}
Вы можете сделать немного больше с помощью параметров здесь, включая настройку Filestack для автоматической обрезки или изменения размера изображений, указание альтернативного хостинга (S3, Dropbox, Azure и т. Д.), Добавление водяных знаков и т. Д., Но то, что вы видите здесь, поможет вам и запускается всего за несколько минут.
