将图片上传到 Firebase 存储时出错答案

【问题标题】：Error uploading image to Firebase Storage将图片上传到 Firebase 存储时出错
【发布时间】：2018-01-12 18:53:42
【问题描述】：

我正在使用 Ionic 制作一个应用程序，我希望用户在其中选择图像，裁剪并上传。为此，我使用cordova camera plugin 和cordova crop plugin。这是我的文件选择器代码：

OpenFilePicker() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: 0  //0 = Chose File; 1 = Take picture
    }

    this.camera.getPicture(options).then((imageData) => {
      //Using the crop plugin:
     this.crop.crop(imageData, {quality: 75})
     .then((newPath) => {
      //Creating the blob
      this.blobimg = new Blob([newPath], {type : 'image/jpeg'});
     })
     .catch((err) => {
     // Handle error crop plugin
     })
    }, (err) => {
     // Handle error camera plugin
    });
  }

然后我将创建的 blob 上传到 firebase 存储：

[...]
const imageRef = storageRef.child(`profilePics/photo.jpg`).put(this.blobimg);

说成功了，但是上传的图片只有105B，全黑（也就是说，它不是真正的图片）。

我在这里做错了什么？

【问题讨论】：

标签： firebase ionic-framework firebase-storage ionic3

【解决方案1】：

我遇到了完全相同的问题，因此该 blob 可能没有完全创建或不完整 - 我仍在调查它，所以一旦我找到一个解决方案

好的，我破解了！！，你需要用canvas把图片转换成base64然后作为data_url上传到firebase，代码如下，用vuejs写的，但我相信你可以重构。

photoUpload: function () {
  var img = new Image()
  var c = document.createElement('canvas')
  var ctx = c.getContext('2d')
  let storage = firebase.storage()
  let storageRef = storage.ref()
  let filesRef = storageRef.child('images/' + this.photo)
  // window.alert(img.src)
  img.onload = function () {
    c.width = this.naturalWidth     // update canvas size to match image
    c.height = this.naturalHeight
    ctx.drawImage(this, 0, 0)
    var dataURL = c.toDataURL('image/jpeg', 0.75)
    filesRef.putString(dataURL, 'data_url')
    .then((snapshot) => {
      window.alert('Uploaded a blob or file!')
      var downloadURL = snapshot.downloadURL
      window.alert(downloadURL)
    }).catch((error) => {
      window.alert(error)
    })
  }
  img.crossOrigin = ''             // if from different origin
  img.src = this.photoURL
},

【讨论】：