將圖像上傳到Firebase存儲時出錯

我正在製作Ionic應用程序，我希望用戶選擇圖像，剪切並上載圖像。爲此，我使用了cordova camera plugin和cordova crop plugin。這是我的文件選擇器代碼：將圖像上傳到Firebase存儲時出錯

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

然後我上傳創建到火力存儲斑：

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

它說，它是成功的，但上傳的圖片只有105 B和爲所有黑色（也就是說，它不是一個真正的圖像）。

我在這裏做錯了什麼？

來源

2017-08-04 jonhz

我有完全相同的問題，所以它可能有可能是blob沒有被完全創建或不完整 - 我仍在研究它，所以一旦找到我會找回你一個解決方案

好的我已經破解了!!，您需要使用畫布將圖像轉換爲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 
},

來源

2017-08-28 21:52:03

將圖像上傳到Firebase存儲時出錯

回答

相關問題