[JavaScript]dataURL轉換Blob 並用 formdata上傳

繼上一篇[Vue2]使用vue-avatar-editor套件裁減照片做出大頭貼(Resize image),這次我要做的是用form-data把我的出圖傳上去,但裁剪後得出圖格式是dataURL,而要上傳的格式要是Blob,該如何實現呢?

注意事項:
1.有import jQuery
2.有import axios

dataURL to Blob

var imgURL = $('.someCanvas').toDataURL("image/png");
//直接複製國外的function

dataURItoBlob: function (dataURI) {
    // convert base64 to raw binary data held in a string

    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this

    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer

    var ab = new ArrayBuffer(byteString.length);

    // create a view into the buffer

    var ia = new Uint8Array(ab);

    // set the bytes of the buffer to the correct values

    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done

    var blob = new Blob([ab], {type: mimeString});
    return blob;

}
var imgBlob = this.dataURItoBlob(imgURL);
//到這邊我們已經製造好blob,開始製造formdata

var postData =  new FormData();
postData.append('key', imgBlob, 'fileName.jpg' );
//最後一個參數是可以自行設定檔案名稱

axios.post('url', postData, {'content-type': 'multipart/form-data'})
    .then( function (response) {
    //handle succeed

    }).catch(function (error) {
     //handle error

    })

這樣就能利用dataURL上傳Blob格式囉!

參考文件

image 各種型態轉換(blob, dataURL, canvas) in JavaScript

stackoverflow-Blob from DataURL?

stackoverflow-How to give a Blob uploaded as FormData a file name?

comments powered by Disqus