Question

的问题

我正在尝试使用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'});
  });
}

Answer 1

我不得不使用react native fetch blob以及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>

Answer 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) )
}

将图像上传到firebase不起作用

的问题

我认为可能是问题

2 个答案: