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)
    });
  });

});

};

我在将文件上传到firebase之前读取了该文件并将其转换为Blob。我收到了“编码错误”，告诉我“提供给API的URI格式错误，或者生成的数据URL超出了数据URL的URL长度限制。”

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

欢迎任何帮助！感谢

Answer 1

uploadPhoto（）是我在firebase存储上传文件的功能（并将其保存在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
  }

随意解析获取目录的路径

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

2 个答案: