RNFetchBlob не работает для загрузки изображения - PullRequest
Новая
       53

RNFetchBlob не работает для загрузки изображения

0 голосов
/ 15 октября 2018

Я пытаюсь сделать функцию загрузки для моего облачного хранилища Firebase.Я использую RNFetchBlob, наряду с реагировать-родной-сборщик изображений.Я могу выбрать фотографии, но это не будет загружать.Все остальные функции Firebase прекрасно работают и устанавливаются через React-Native-Firebase ...

Ничего не происходит после 'fs.readFile'. 

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Platform,
  Image,
  ActivityIndicator
} from 'react-native'
import ImagePicker from 'react-native-image-picker'
import RNFetchBlob from 'rn-fetch-blob'
import firebase from 'react-native-firebase';


const storage = firebase.storage()

// Prepare Blob support
const Blob = RNFetchBlob.polyfill.Blob
const fs = RNFetchBlob.fs
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
window.Blob = Blob

const uploadImage = (uri, mime = 'application/octet-stream') => {
  return new Promise((resolve, reject) => {
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
    const sessionId = new Date().getTime()
    let uploadBlob = null
    const imageRef = storage.ref('images').child('${sessionId}')

    fs.readFile(uploadUri, 'base64')
      .then((data) => {
        return Blob.build(data, { type: '${mime};BASE64' })

      })
      .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })

      })
      .then(() => {
        uploadBlob.close()
        return imageRef.getDownloadURL()
      })
      .then((url) => {
        resolve(url)
      })
      .catch((error) => {
        reject(error)
    })
  })
}


class Demo extends Component {
  constructor(props) {
    super(props)

    this.state = {}
  }

  _pickImage() {
    this.setState({ uploadURL: '' })

    ImagePicker.launchImageLibrary({}, response  => {
      uploadImage(response.uri)
        .then(url => this.setState({ uploadURL: url }))
        .catch(error => console.log(error))
    })
  }

  render() {
    return (
      <View style={ styles.container }>
        {
          (() => {
            switch (this.state.uploadURL) {
              case null:
                return null
              case '':
                return <ActivityIndicator />
              default:
                return (
                  <View>
                    <Image
                      source={{ uri: this.state.uploadURL }}
                      style={ styles.image }
                    />
                    <Text>{ this.state.uploadURL } {this.state.uploadURL}</Text>
                  </View>
                )
            }
          })()
        }
        <TouchableOpacity onPress={ () => this._pickImage() }>
          <Text style={ styles.upload }>
            Upload
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    height: 200,
    resizeMode: 'contain',
  },
  upload: {
    textAlign: 'center',
    color: '#333333',
    padding: 10,
    marginBottom: 5,
    borderWidth: 1,
    borderColor: 'gray'
  },
})

export default Demo

Я получаю эту ошибку вмоя консоль при выборе фото:

filePath.replace не является функцией.(В 'filePath.replace (' file: // ',' ')', 'filePath.replace' не определено)]

1 Ответ

0 голосов
/ 22 октября 2018

Просто передайте URL-адрес изображения непосредственно в хранилище.Вам больше не нужно создавать файл BLOB-объектов.Я полагаю, что firebase теперь обрабатывает это внутренне.

Вот пример, который я только что протестировал вместе с response-native-image-crop-picker: 

import firebase from 'react-native-firebase';
import ImagePicker from 'react-native-image-crop-picker';

export default class ImageUploadService {
  static init() {}

  static openPickerAndUploadImage() {
    const uid = '12345';

    ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: true,
      mediaType: 'photo',
    })
      .then(image => {
        const imagePath = image.path;

        const imageRef = firebase
          .storage()
          .ref(uid)
          .child('dp.jpg');
        let mime = 'image/jpg';

        imageRef
          .put(imagePath, { contentType: mime })
          .then(() => {
            return imageRef.getDownloadURL();
          })
          .then(url => {
            // You could now update your users avatar for example
            //firebase.database().ref('users').child(uid).update({ ...userData})
            console.log('URL', url);
          });
      })
      .catch(error => {
        console.log(error);
      });
  }
}

ImageUploadService.init();

Теперь просто вызовите ImageUploadService.openopenPickerAndUploadImage () водин из ваших компонентов.

Я уверен, что это также будет работать и с реагирующим родственным изображением, просто удалите части BLOB-объектов в вашем коде и передайте URL-адрес изображения непосредственно в ваш imageRef.put

==> 

const uploadImage = (uri, mime = 'application/octet-stream') => {
  return new Promise((resolve, reject) => {
    const imagePath = uri;

    const imageRef = firebase
      .storage()
      .ref('images')
      .child('dp.jpg');
    let mime = 'image/jpg';

    imageRef
      .put(imagePath, { contentType: mime })
      .then(() => {
        return imageRef.getDownloadURL();
      })
      .then(resolve)
      .catch(reject);
  });
};
...