将图像从 Ionic 上的 cordova 相机插件存储到 Firebase 存储

Question

我已经标记了一些关于该主题的主题（例如：Uploading image to Firebase Storage from Cordova app）但没有找到我的答案...

我正在开发一个 IONIC 项目，该项目使用 ngCordova 相机插件来拍照并从库中获取图片。

所以我得到了一个图像 URI 的结果，我想将它上传到 Firebase 存储中（作为文件或 Blob）。 这是我的代码：

$scope.fromCamera = function() {
 $ionicPlatform.ready(function() {

  var options = {
    quality: 75, 
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.CAMERA,
    allowEdit: true,
    encodingType: Camera.EncodingType.JPEG, 
    targetWidth: 300, 
    targetHeight: 300, 
    saveToPhotoAlbum: true e
  };

  $cordovaCamera.getPicture(options).then(function(imageURI) { 
    window.resolveLocalFileSystemURL(imageURI, function (fileEntry) {
      fileEntry.file(function (file) {
        var reader = new FileReader();
        reader.onloadend = function () {
          // This blob object can be saved to firebase
          var blob = new Blob([new Uint8Array(this.result)], { type: "image/jpeg" });                  

          // Create the storage ref
          var ref = storageRef.child('images/test');
          // Upload the file
          uploadPhoto(blob, ref);

        };
        reader.readAsArrayBuffer(file);
      });
    }, function (error) {
      console.log(error)
    });
  });

});

};

我读取文件并将其转换为 Blob，然后再将其上传到 Firebase。我收到一个“编码错误”，告诉我“提供给 API 的 URI 格式不正确，或者生成的数据 URL 超出了数据 URL 的 URL 长度限制。”

我正在使用带有 Cordova Mocks 扩展的 chrome 浏览器运行它。

欢迎任何帮助！ 谢谢

Answer 1

uploadPhoto() 是我将文件上传到 firebase 存储的函数（并将 URL 保存在 firebase 数据库中）

var storageRef = Firebase.storageRef();
var databaseRef = Firebase.databaseRef();

var uploadPhoto = function(file, ref) {
  var task = ref.put(file);
  // Update progress bar
  task.on('state_changed', function(snapshot){ 
    // nothing
  }, function(error) {
    // Handle unsuccessful uploads
  }, function() {
    // Handle successful uploads on complete
    $scope.downloadURL = task.snapshot.downloadURL;
    $scope.actualKey = databaseRef.child('posts').push().key;

    databaseRef.child('posts/' + $scope.actualKey).update({
      url : $scope.downloadURL, 
      id : $scope.actualKey,
      time : firebase.database.ServerValue.TIMESTAMP,
    });
  }
);

}

Answer 2

尝试改变...

[new Uint8Array(this.result)]

就这个

[this.result]

使用$cordovaFile的替代方法

var fileName = imageURI.replace(/^.*[\\\/]/, '');

$cordovaFile.readAsArrayBuffer(cordova.file.tempDirectory, fileName)
  .then(function (success) {
    // success - get blob data
    var imageBlob = new Blob([success], { type: "image/jpeg" });

      // Create the storage ref
      var ref = storageRef.child('images/test');
      // Upload the file
      uploadPhoto(imageBlob, ref);

  }, function (error) {
    // error
  });

我没有从 URI 中获取路径，而是在代码中假设以下内容...

  // modify the image path when on Android
  if ($ionicPlatform.is("android")) {
    path = cordova.file.cacheDirectory
  } else {
    path = cordova.file.tempDirectory
  }

随意解析路径获取目录