Блог

Предыстория

Я пытаюсь загрузить изображения в хранилище firebase вручную (используя кнопку загрузить файл на веб-странице), однако я понятия не имею, как позже связать их с документом firestore. Что я придумал (я не уверен, работает ли это), так это копирование URL-адреса изображения в хранилище и добавление его в поле строкового типа в документе под названием profilePicture . Причина, по которой я не могу заставить это работать, заключается в том, что я действительно новичок в React Native, и я не знаю, как правильно запрашивать изображения, кроме ввода в определенном локальном маршруте. Имейте в виду также, что мне требуются пользовательские данные, такие как имя профиля, после входа в систему с помощью авторизации по электронной почте / паролю я передаю данные в качестве параметра для навигации react и запрашиваю их как дополнительные данные.

Что я пробовал

После того, как я скопировал URL-адрес изображения и вставил его в документ firestore, я делаю это:

 const profilePicture = props.extraData.profilePicture;

<Image source={require({profilePicture})}/>
  

Я также пытался использовать обратные ссылки, но это тоже не работает. Я получаю сообщение об ошибке:

 TransformError srcscreensProfileProfileScreen.js: srcscreensProfileProfileScreen.js:Invalid call at line 27: require({
  profilePicture: profilePicture
})
  

Примечание: это проект, управляемый expo.

Вопрос

Проблема в коде или в том, как я связываю оба изображения? Может быть, и то, и другое? Должен ли я требовать документ, а не полагаться на данные, переданные ранее?

Заранее большое спасибо!

Редактировать 1:

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

const ref = firebase.storage().ref(‘path/to/image.jpg ‘); const url = ожидание ссылки.getDownloadURL();

и тогда мне потребуется изображение, как в <Image source={{uri: url}}/>

Я понимаю, что это может быть полезно для чего-то статического, но я не понимаю, как обновлять ссылку для каждого отдельного пользователя.

Правка 2:

Пробовал использовать метод, упомянутый в правке 1, просто чтобы посмотреть, что произойдет, однако, похоже, он не работает, изображение просто не отображается. Может быть, потому, что мой компонент является функциональным компонентом, а не компонентом класса (?

Я понимаю, что ваша цель — создать для каждого изображения, загружаемого в облачное хранилище, документ Firestore, содержащий URL-адрес для загрузки.

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

 exports.generateFileURL = functions.storage.object().onFinalize(async object => {

    try {
        const bucket = admin.storage().bucket(object.bucket);
        const file = bucket.file(object.name);

        // You can check that the file is an image

        const signedURLconfig = { action: 'read', expires: '08-12-2025' };  // Adapt as follows

        const signedURLArray = await file.getSignedUrl(signedURLconfig);
        const url = signedURLArray[0];

        await admin.firestore().collection('profilePictures').add({ fileName: object.name, signedURL: url }) // Adapt the fields list as desired 
        return null;

    } catch (error) {
        console.log(error);
        return null;
    }

});
  

Подробнее о getSignedUrl() методе Admin SDK здесь .

Также обратите внимание, что вы могли бы назначить идентификатор документа Firestore самостоятельно, вместо того, чтобы Firestore генерировал его, как показано в приведенном выше коде (с add() помощью метода). Например, вы можете добавить к метаданным изображения uid пользователя и в облачной функции получить это значение и использовать это значение в качестве идентификатора документа.

Другая возможность — присвоить изображению профиля имя uid пользователя.