Firebase Storageに画像をアップロードする際にエラーが発生しました

Question

私はユーザーが画像を選択してトリミングしてアップロードしたいアプリケーションを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 
    }); 
    } 

そして私はfirebaseストレージに作成されたブロブをアップロード：

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

それはすべて、それが成功したのですが、アップロードされた画像は、唯一の105 Bであるとであると言います黒（つまり、実際にはイメージではありません）。

私はここで間違っていますか？

Answer 1

ブロブが完全に作成されていないか不完全である可能性があります。解決策

私はそれを分解しました!!画像をbase64に変換してからfirebaseとしてdata_urlにアップロードする必要があります。下のコードは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 
},