Документация о том, как создать систему передачи файлов, хорошо документирована, так как это возможность загружать отдельные файлы в firebase. Я хотел иметь возможность добавлять несколько изображений, хотя проект, над которым я работаю, требует сброса больших групп изображений, а время на загрузку по одному в лучшем случае утомительно.
Для этого проекта я не использую никаких специальных загрузчиков пакетов, и полный проект можно увидеть здесь https://github.com/T-dex/bluebirddesktopapp
Для загрузки файлов я создал компонент, который обрабатывает все данные файла, и я использовал тип «файл» в элементе входного тега вместе с несколькими, чтобы позволить мне добавить более одного файла.
<input type="file" multiple onChange={this.addFile}/>
Функция addFile была простой: файлы добавлялись в локальное состояние, так как мне нужно было передать больше информации, которую пользователь установил бы перед загрузкой. Файлы были помещены в компонент верхнего уровня в функции addFile, вызываемой во входном теге с this.props.fileUpload(event)
Передача его в компонент верхнего уровня произойдет после того, как дата будет добавлена вместе с пользователем. Это было передано в функцию с this.props.pictureUpload(picData), которая передавала все данные файла, которые были извлечены с компьютера, вместе с датой и информацией о пользователе, которые потребуются для создания уникального объекта пользователя.
Все данные были переведены на верхний уровень, и именно здесь мне нужно было сопоставить все изображения и ключи и сопоставить их, чтобы увидеть,
- Пользователь существует
- Создание уникального объекта для каждой фотографии с пользователем и датой, который был добавлен человеком, добавляющим файлы
- Добавление вызова Firebase для загрузки и получения URL-адреса, где размещены изображения, чтобы указать объекты, созданные ранее, на фотографии.
- Добавляем все это в состояние и отправляем новое состояние в firebase со всеми плюшками.
Вот тут-то и проявляется хитрость
Я долго боролся, пытаясь правильно просмотреть каждый элемент и убедиться, что я возвращаю правильный URL-адрес для каждой фотографии. Firebase имеет очень простую настройку и документацию для всех необходимых данных, когда вы отправляете файлы в Firebase, что очень стандартно для загрузки в службу хранения. Если вы не использовали Firebase для бэкэнда и хотите использовать песочницу, я лично рекомендую его, так как масштабируемость и простота использования из коробки отлично подходят для небольших проектов (читайте: БЕСПЛАТНО 99!), А также он поставляется с отличным Google набор аналитики.
Существуют пакеты, которые могут делать это с меньшим количеством строк и меньшим количеством набора текста, но я хотел убедиться, что понимаю, как это обрабатывается и продвигается вверх.
Во-первых, необходимо настроить все данные на верхнем уровне функции, чтобы иметь к ним доступ на протяжении всего остального процесса.
pictureUpload = (picData) => {
let picName;
let file;
let refURL;
let updatedURL=[];
...
}
Все установленные здесь переменные должны находиться в области верхнего уровня этой функции, так как, когда мы начинаем сопоставление с методом, используемым для извлечения URL-адреса хранилища для добавления к нашему объекту, является асинхронным, у меня есть их здесь, чтобы разрешить проталкивание и распространение с использованием оператора распространения в ES6 с данными, поступающими не за один раз, и перезапись данных каждый раз, когда новая ссылка возвращается из Firebase.
Если вам действительно нужно добавить метаданные к изображениям для SEO, это просто: вы просто создаете и устанавливаете переменную, например
const metadata = {
contentType: 'image/jpeg'
};
Я обычно рекомендую делать это так, как если бы вы собирались загружать видео или разные типы контента, вы можете установить это простые условные операторы и передать правильные типы.
Вот и товар
На данный момент у нас есть все данные, настроенные в состоянии, готовом к отображению и игре.
Для начала я создал переменную с именем newRef. Эта переменная будет хранить все данные и использовать несколько .map методов для их накопления.
Если вы не настроили проект реакции с помощью firebase, я бы направился на канал Youtube firebase, так как у них есть отличное видео о настройке вызовов firebase в проекте приложения create-response-app, которое поможет вам все настроить. и бег.
У меня есть вызов базы данных, настроенный в верхней части моего основного App.js следующим образом
const rootRef = firebase.database().ref();
const storageRef = firebase.storage().ref();
const mainRef = rootRef.child('staging');
Все эти переменные используются при вызове и взаимодействии с Firebase.
С этим я собираюсь вызвать storageRef в этой части, поскольку именно здесь я собираюсь отправить данные в свое хранилище firebase, а Google сделает тяжелую работу по созданию URL-адреса, который я собираюсь добавить к своему объекту и состоянию.
Для начала вызывается storageRef с .child с picName в качестве аргумента. Это позволяет нам войти в firebase с изображением и начать добавлять их в хранилище. После этого я использую метод .put, поскольку я хочу, чтобы firebase начала создавать URL-адрес и чтобы они мне были нужны в хранилище, которое есть у firebase. .put - это обещание, которое вы используете для передачи файла и метаданных файлов, которые вам нужно загрузить. После этого начинается загрузка и создается обещание, в котором может быть вызван .then для сбора моментального снимка базы данных. Вы можете пометить snapshot, что бы вы ни выбрали, но я предпочитаю снимок, поскольку он прекрасно описывает, что возвращается для хранилища Firebase.
При этом изображения загружаются на сервер, и приходит время получить URL-адрес, который необходим в объектах, которые создаются позже. На snapshot вы можете вызвать .ref.getDownloadURL(), который получит доступ к загруженным файлам. Когда обещание выполнено, теперь у нас есть возможность начать создание refURL к фотографиям в firebase. Связывая все это вместе, вы должны начать видеть образец связанных обещаний, которые не очень хороши, но с учетом того, как я их здесь строю, это необходимо. Вот как должен выглядеть общий код в начале этого процесса.
let newRef = storageRef.child(picName).put(file, metadata).then((snapshot) => snapshot.ref.getDownloadURL().then((downloadURL) => {
...
}
Когда все изображения загружаются в firebase и их уникальный URL-адрес передается обратно, время начинает создавать объекты, которые будут переданы в базу данных для использования.
В это время обещание будет возвращать по одному downloadURL за раз. Если бы вы зашли и добавили их сюда, URL-адрес был бы последним, который будет отправлен вниз. Помните, как ранее я сказал, что у нас есть переменные вне этого вызова, чтобы мы могли вставить один элемент, а затем добавить больше, когда обещания возвращают наши данные?
Именно здесь в игру вступает магия ES6. Сначала я настраиваю объект varabile с ключом и устанавливаю пару значений как возвращаемые downloadURL данные с указанием направления на фотографию в хранилище firebase. Это должно выглядеть примерно так
let testURL = {
[newPicKey]: downloadURL
}
Это дает мне единственный объект, который я могу поместить в объект refURL, который я создал ранее, и распространять его каждый раз, когда данные возвращаются с новой парой ключ-значение. Я распространяю объект refURL каждый раз, так как это позволяет мне добавлять новый и не перезаписывать объект при каждом проходе и передавать его, вставляя его в массив uploadURL, который я создал ранее.
refURL = {
...refURL,
[key]: testURL,
}
updatedURL.push(testURL)
Это дает нам массив со всеми изображениями, настроенными с уникальным ключом и URL-адресом, который направляет базу данных к изображениям.
При загрузке большинства изображений вы действительно хотите проверить, существует ли пользователь, поскольку создавать нового пользователя каждый раз дорого, и становится огромной проблемой выяснить, какие из них должны отображаться во внешнем интерфейсе.
При этом у меня есть все изображения, настроенные для ссылки на URL-адрес.
Поскольку это становится немного многословным, я собираюсь разделить это на две части. Эта основная часть немного многословна и проста, но, как я выяснил, она требует правильного размещения переменных и объектов, поэтому я не буду перезаписывать ее каждый раз, когда появляется что-то новое.
Вот как должна выглядеть функция до этого момента. Я углублюсь в строительство остальной части объекта во второй части.
Песня дня - «Еще одна зима» Анамангути
Не стесняйтесь обращаться в комментариях, если вам нужна помощь или что-то не так с этим процессом. С нетерпением жду завершения части 2!
