Как загрузить изображение из телефона в хранилище Firebase?

Question

Я пытаюсь загрузить изображение из моего телефона в Firebase с помощью Expo. Я получаю URI из рисунка, но не знаю, как конвертировать его, чтобы загрузить его в Firebase?

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    if (!result.cancelled) {
      console.log('device URL: w',result.uri);
      this.setState({ image: result.uri });
      this.uploadImage(result.uri).then(resp =>{
        alert('success')
      }).catch(err=>{
        console.log(err)
      })
    }
  };

Когда я регистрирую result.uri, я получаю:

Файл:/// вар / мобильный / Контейнеры /Data/Application/1E5612D6-ECDB-44F4-9839-3717146FBD3E/ Библиотека / кэши /ExponentExperienceData/%2540anonymous%252FexpoApp-87f4a5f5-b117-462a-b147-cab242b0a916/ImagePicker/45FA4A7B-C174-4BC9-B35A-A640049C2CCB.jpg

Как я могу преобразовать его в формат, который работает для Firebase?

Answer 1

Вы можете конвертировать изображение в base64, есть несколько библиотек, которые могут это сделать.

Answer 2

Вам необходимо преобразовать изображение в base64, вот пример использования rn-fetch-blob https://github.com/joltup/rn-fetch-blob

 export const picture = (uri, mime = 'application/octet-stream') => {
  //const mime = 'image/jpg';
  const { currentUser } = firebase.auth();  
  const Blob = RNFetchBlob.polyfill.Blob;
  const fs = RNFetchBlob.fs;
  window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
  window.Blob = Blob;

  return ((resolve, reject) => {
      const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
      let uploadBlob = null;
      const imageRef = firebase.storage().ref('your_ref').child('child_ref');
      fs.readFile(uploadUri, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` });
      })
      .then((blob) => {
        uploadBlob = blob;
        imageRef.put(blob._ref, blob, { contentType: mime });
      })
      .then(() => {
        //take the downloadUrl in case you want to downlaod
        imageRef.getDownloadURL().then(url => {
         // do something
        });
      });
  });
};