Question

我有多个存储在数组中的图像（存储在数组中的图像路径）。然后我使用for循环上传每个图像，但只上传最后一个图像。我使用react native fetch blob和firebase

＆＃13;

for(var i = 0; i < this.state.imagesUri;i++){
 Blob.build(RNFetchBlob.wrap(this.state.imagesUri[i].path),{ type : 'image/jpeg' })
            .then((blob) => firebase.storage()
            .ref("userPhoto").child("image"+i)
            .put(blob, { contentType : 'image/png' }).then(()=>{
   var storage =  firebase.storage().ref("userPhoto/").child("image"+i);
              storage.getDownloadURL().then((url)=>{
                var url = url;
              });
            })
          );
        }

＆＃13;

Answer 1

我希望这会有所帮助

 onSend(images) {
        let photo = images.map( img=> img.image); 
        photo.forEach((image, i) => {
        const sessionId = new Date().getTime();
        const Blob = RNFetchBlob.polyfill.Blob;
        const fs = RNFetchBlob.fs;
        window.XMLHttpRequest =                     
        RNFetchBlob.polyfill.XMLHttpRequest;
        window.Blob = Blob;
        let uploadBlob = null;
        let mime = 'image/jpg';
        const imageRef = this.image.child(`${sessionId}${i}`);
            fs.readFile(image, '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) => {
                                console.log(url)                                        
                               })
                                .catch((error) => {
          
                                });

                              })
                            }

Answer 2

好的，首先，您需要缓存数组this.state.imagesUri的长度。

这会使你的for循环看起来像for(var i = 0, length = this.state.imagesUri.length; i < length;i++){，我希望你注意到你不再检查i < this.state.imagesUri（这是不正确的，因为imagesUri是一个数组）。

Answer 3

我有这个代码。在响应本机上使用firebase和'rn-fetch-blob'上传多张图片

export const uploadListImageMeal = (param) => {
  const { imagesUrls, mime = 'application/octet-stream', userID, time } = param

  const urls = imagesUrls.map((uri) => {
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
    // let uploadBlob = null
    const currentTime = Date.now()
    const imageRef = firebase.storage().ref(`images/${userID}/meal/${time}`).child(`${currentTime}.png`)
    return fs.readFile(uploadUri, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` })
      })
      .then((blob) => {
        // uploadBlob = blob
        return imageRef.put(blob._ref, blob, { contentType: mime })
      })
      .then(() => {
        // uploadBlob.close()
        return imageRef.getDownloadURL()
      })
      .then((url) => {
        return (url)
      })
      .catch((error) => {
        return host
      })
  })


  return Promise.all(urls)
    .then((data) => {
      return data
    })
}

如何将多个图像上传到firebase in react native fetch blob

3 个答案: