blob物件轉換為blob(url)的問題
這兩天踩了一個坑與大家分享，同時記錄自己的錯誤，由於公司業務的需求，需要把本地圖片上傳給後臺，可是問題來了我的ajax傳送了過去但是報了錯，我問後臺同事，他說我傳送過去的東西原始檔為空，問了後臺才知道我不能直接發我本地獲取的base64過去，要轉成blob物件
function dataURItoBlob(base64Data) {
var byteString;
if(base64Data.split(’,’)[0].indexOf(‘base64’) >= 0)
byteString = atob(base64Data.split(’,’)[1]);
else
byteString = unescape(base64Data.split(’,’)[1]);
var mimeString = base64Data.split(’,’)[0].split(’:’)[1].split(’;’)[0];
var ia = new Uint8Array(byteString.length);
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
上面這個函式是封裝好的，把檔案或者base傳進去就能出來一個blob物件（說白了二進位制檔案）
然後轉成了blob物件後就能成功傳送了，問題又來了後臺給我返回了新的base64編碼(後臺處理完成後的圖片base64)我要把這個base64轉成blob開頭的blob連結，於是我就一次又一次的使用如下方法
window.URL = window.URL || window.webkitURL;
var url = window.URL.createObjectURL(‘這裡是我傳入的base64’);
但是我的控制檯報了個錯：Uncaught TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: No function was found that matched the signature provided
天吶我實在是想不通為什麼要報錯，這個時候很無助，問同事也無果，就索性自己來解決。
然後就這樣困擾了一天，直到我在一個前端論壇看到了這句話：‘當我傳遞給createObjectURL原始資料時，我遇到了同樣的錯誤：window.URL.createObjectURL(data)它必須是Blob，File或MediaSource物件，而不是資料本身。’原來我把base64傳進去是錯誤的做法，正確的做法是我應該把後臺返回的base64，再呼叫一次上面封裝好的函式把base64轉成blob物件在傳入這裡：
window.URL = window.URL || window.webkitURL;
var url = window.URL.createObjectURL(‘必須是Blob，File或MediaSource物件’);
這樣就能得到下面這樣的連結了：blob: