Question

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

控制台记录数据已成功上传。我在firebase存储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

[编辑2/15/2017]

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)

将多个图像blob从离子1上传到firebase 3

1 个答案: