无法将图片上传到 Firebase答案

【问题标题】：Uploading images to Firebase doesn't work无法将图片上传到 Firebase
【发布时间】：2018-06-14 21:03:25
【问题描述】：

问题

我正在尝试使用 React Native 将图像上传到 Firebase。我正在使用此代码来执行此操作，当我使用此代码时，没有任何反应。进度百分比永远不会上升*。

var uploadTask = 
   storageRef.child('images/'+expoID+this.state.time).put(
     this.state.image, metadata
   );

this.state.time 是时间戳，它是在屏幕开始时定义的状态，因此图像和帖子没有不同的时间戳。

this.state.image 是用户手机上图像的直接路径。

元数据是：

{
  contentType: 'image/jpeg'
};

我认为可能是问题所在

我认为问题可能在于this.state.image 变量是用户手机上文件的路径，而这可能是错误的格式。问题是我不知道还能放什么。

*进度百分比代码：

uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
  function(snapshot) {
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    this.setState({progress:'Upload is ' + progress + '% done'});
  });
}

【问题讨论】：

标签： javascript firebase react-native firebase-storage

【解决方案1】：

我必须使用 react native fetch blob 和 react native 图像裁剪选择器，以便 Firebase 能够接收我的图像。这是我所做的：

   openImage() {
      this.setState({ loading: true });
      const imageChangeFail = () => {
         this.setState({ loading: false });
      };
      const Blob = RNFetchBlob.polyfill.Blob;
      const fs = RNFetchBlob.fs;
      window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
      window.Blob = Blob
      const item = Date.now() + Math.random();

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

             const uploadBlob = null;
             const storage = firebase.storage();
             const storageRef = storage.ref();
             const imageRef = storageRef.child(item + '.jpg');
             const mime = 'image/jpg';
             fs.readFile(imagePath, '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) => {
                         const { image } = this.props;
                          //this.props.entryUpdate is my action creator 
                          //to update a piece of state called 
                          //entryForm.  Image is just one piece of that 
                          //state.
                         this.props.entryUpdate({ prop: 'image', value: 
                                  url })
                         })
                             this.setState({ loading: false });
                         });
                        }

然后我会在这里调用 openImage()：

<TouchableOpacity
  onPress={() => this.openImage()}
>
  <Text
     style={{
       color: '#000',
       alignSelf: 'center',
     }}
  >
     <Icon name="photo-camera" size={45} color="#000" />
  </Text>

</TouchableOpacity>

【讨论】：

【解决方案2】：

试试：

uploadImage = async (expoID) => {
  var response = wait fetch(this.state.image);
  var blob = await response.blob();

  storageRef.child('images/'+expoID+this.state.time).put(blob)
    .then( console.log('sucess') )
    .catch( (error) => console.log(error.messaeg) )
}

【讨论】：