将多个图像Blob从Ionic 1上传到Firebase 3

Question

我可以将转换为Blob的单个图像成功上传到Firebase 3。 但是，当我尝试从Ionic 1应用程序将多个图像上传到Firebase 3时，它失败了。

控制台记录数据已成功上传。 我在Firebase存储用户界面中看不到它。 我只看到我选择的第一张图像。

这是获取图像的代码：

  $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)