複数の画像ブロブをfirebase 3にアップロードする1

Question

ブロブに変換された1つの画像をfirebase 3に正常にアップロードできます。しかし、私がionic 1アプリからfirebase 3に複数の画像をアップロードしようとすると失敗します。

コンソールは、データが正常にアップロードされたことを記録します。私はfirebase storageのUIでそれを見ることができません。私は選択した最初の画像しか見ることができません。知らなくても、以下

$scope.getImages = function() { 
    var options = { 
    maximumImagesCount: 10, 
    width: 1000, 
    height: 1000, 
    quality: 100 
    }; 

    $cordovaImagePicker.getPictures(options) 
    .then(function (results) { 
     for (var i = 0; i < results.length; i++) { 
     $scope.selectedImages.push(results[i]); 
     var fileName = results[i].replace(/^.*[\\\/]/, ''); 

     // the image storage path is different on android 
     var path = ''; 
     if ($ionicPlatform.is("android")) { 
      path = cordova.file.cacheDirectory; 
     } 
     else { 
      path = cordova.file.tempDirectory; 
     } // end of android image rectification 

     $cordovaFile.readAsArrayBuffer(path, fileName) 
      .then(function (realImage) { 
      var imageBlob = new Blob([realImage], { type: "image/jpeg" }); 

      imgUpload(imageBlob, fileName) 

      }) 
     } 

    }, function (error) { 
     // error getting photos 
     console.log(error.name); 
    }) 

がfirebaseサービス

function imgUpload(_imgBlob, _filename) { 

    var uploadsMetadata = { 
    cacheControl: "max-age=" + (60 * 60 * 24 * 365) // One year of seconds 
    }; 

    //create the storage reference and use it to access 
    var storeRef = firebase.storage().ref(); 



    var uploadTask = storeRef.child('images/' + _filename).put(_imgBlob, uploadsMetadata); 

    return new Promise(function (resolve, reject) { 
    uploadTask.on('state_changed', function (snap) { 
     console.log('Progress: ', snap.bytesTransferred, '/', snap.totalBytes, ' bytes'); 
    }, function (err) { 
     console.log('upload error', err); 
     reject(err); 
    }, function() { 
     var metadata = uploadTask.snapshot.metadata; 
     var key = metadata.md5Hash.replace(/\//g, ':'); 
     var fileRecord = { 
     downloadURL: uploadTask.snapshot.downloadURL, 
     key: key, 
     metadata: { 
      fullPath: metadata.fullPath, 
      md5Hash: metadata.md5Hash, 
      name: metadata.name 
     } 
     }; 

     // uploadsRef.child(key).set(fileRecord).then(resolve, reject); 
    }); 
    }); // end of Promise 


    // return snapshot; 
} // end of function imgUpload 

Answer 1

[編集2017年2月15日]

Padrianためのコードである：

これは、画像を取得するコードであります上記のコードで特定のエラーが発生していたのは、あなたの問題が処理していたものと同じである、つまりメタデータが定義されていないため、metadata.md5Hashが失敗したと仮定することしかできません。私のコードとあなたのコードは、UIフレームワークの違いを除いてほぼ同じです。エラーを除去するための

私の最初のリファクタリングはリスニングonイベントを削除し、ちょうどそのよう.put()にコールバックを持って行きましたことだった。

storageRef.child(uploadFile.name).put(uploadFile).then(cb(snap)).catch(errCB(err)) 

私はさらに私のコードをリファクタリングし、同じように不思議ながあったとして問題はもはや問題ではありませんでした。以下は、アップロードファイルを処理するための私の完全なコードです。私はコードをasync.queueの中に置きましたので、一度に4つのファイルにファイルのアップロードを制限することができました。

const q = async.queue(function (file, callback) { 
    let reader = new window.FileReader() 

    reader.onload = function (e) { 
    const tags = ExifReader.load(e.target.result) 
    if (tags['Orientation'].description === 'left-bottom') { 
     file.rotation = 'rotate(-90deg)' 
    } 
    } 

    reader.readAsArrayBuffer(file.file.slice(0, 128 * 1024)) 

    let uploadTask = storageRef.child(file.file.name).put(file.file, uploadsMetadata) 
    file.uploadSuccess = false 
    file.uploadError = false 
    file.active = 'active' 

    uploadTask.on('state_changed', 
    function (snap) { 
     file.progress = snap.bytesTransferred/snap.totalBytes * 100 
    }, 
    function (err) { 
     file.uploadError = true 
     file.errorMessage = err 
     callback(err) 
    }, 
    function() { 
     let metadata = uploadTask.snapshot.metadata 
     let key = metadata.md5Hash.replace(/\//g, ':') 
     let pendingInventoryRecord = { 
     downloadURL: uploadTask.snapshot.downloadURL, 
     key: key, 
     metadata: { 
      fullPath: metadata.fullPath, 
      md5Hash: metadata.md5Hash, 
      name: metadata.name 
     }, 
     style: file.invStyle, 
     size: file.invSize, 
     count: file.invCount, 
     rotate: file.rotation || '' 
     } 
     uploadRef.child(key).set(pendingInventoryRecord) 
     .then(function() { 
     pendingInventoryCountRef.child('counter').transaction(function (currentVal) { 
      return (currentVal || 0) + 1 
     }) 

     callback(null, file) 
     }) 
     .catch(function (err) { console.log(err) }) 
    }) 
}, 4)