base64數(shù)據(jù)流、blob對象上傳OSS(非node.js環(huán)境)

具體流程:
圖片base64 → blob對象 → arrayBuffer對象 → buffer對象 → 成功上傳(幔嫂。???)ノ゛

直接上代碼

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script>
    function toBlob(urlData,fileType) {
        let bytes = window.atob(urlData);
        let n = bytes.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bytes.charCodeAt(n);
        }
        return new Blob([u8arr], { type: fileType });
    }

    // 圖像數(shù)據(jù) (e.g. data:image/png;base64,iVBOR...yssDuN70DiAAAAABJRU5ErkJggg==)
    const urlData;
    const base64 = urlData.split(',').pop();
    const fileType = urlData.split(';').shift().split(':').pop();

    // base64轉(zhuǎn)blob
    const blob = toBlob(base64, fileType);

    // blob轉(zhuǎn)arrayBuffer
    const reader = new FileReader();
    reader.readAsArrayBuffer(blob);
    reader.onload = function (event) {

        // 配置
        const client = new OSS.Wrapper({
            region: '<Your region>',
            accessKeyId: '<Your AccessKeyId>',
            accessKeySecret: '<Your AccessKeySecret>',
            bucket: 'Your bucket name'
        });

        // 文件名
        const objectKey = `uploads/file/${new Date().getTime()}.${fileType.split('/').pop()}`;

        // arrayBuffer轉(zhuǎn)Buffer
        const buffer = new OSS.Buffer(event.target.result);

        // 上傳
        client.put(objectKey, buffer).then(function(result){
            /* e.g. result = {
                name: "Uploads/file/20171125/1511601396119.png",
                res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …},
                url: "http://bucket.oss-cn-shenzhen.aliyuncs.com/Uploads/file/20171125/1511601396119.png"
            } */
        }).catch(function(err){
            console.log(err);
        });
    }
</script>

筆者之前一直用<input type="file">方法獲取圖片文件再分片上傳透罢,然而為了處理iPhone手機拍照上傳照片旋轉(zhuǎn)90度問題户矢,必須考慮處理后的base64數(shù)據(jù)钦铁。
在尋找解決辦法的過程中软舌,發(fā)現(xiàn)不少小伙伴同樣被這個問題困住,希望這篇文章能幫到些許牛曹。
雖然目前能將base64數(shù)據(jù)上傳到OSS佛点,但實際運用在h5項目里,效果不是很好黎比,傳得又卡又慢超营,只能將照片縮小處理后再上傳。
如果小伙伴有更好的解決辦法阅虫,不吝賜教演闭。



2018.04.15更新

整理了下報錯原因:

  1. “Error: _getFileSize requires Buffer/File/String.”
    上傳用的multipartUpload方式 && 上傳文件不是buffer內(nèi)容。
  2. “Error: _createStream requires File/String.”
    上傳用的multipartUpload方式书妻。
  3. “TypeError: Must provide String/Buffer/ReadableStream for put.”
    上傳文件不是buffer內(nèi)容船响。

總結(jié):想要成功上傳base64數(shù)據(jù)到OSS,必須通過put接口傳轉(zhuǎn)換后的buffer文件躲履!



2019.03.25更新

從同事那兒學(xué)到base64轉(zhuǎn)buffer的新方法:
const buffer = Buffer.from(base64, 'base64');



參考:
阿里云sdk 前端如何上傳blob對象到OSS
上傳文件 - SDK 參考| 阿里云文檔中心
擁抱ES6——OSS JavaScript SDK開發(fā)手記
JS Blob對象-我的前端之路
Html5——File见间、FileReader、Blob工猜、Fromdata對象
Node.js Buffer與JavaScript TypeArray類型數(shù)組的異同

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末米诉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子篷帅,更是在濱河造成了極大的恐慌史侣,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,252評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件魏身,死亡現(xiàn)場離奇詭異惊橱,居然都是意外死亡,警方通過查閱死者的電腦和手機箭昵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評論 3 399
  • 文/潘曉璐 我一進店門税朴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人家制,你說我怎么就攤上這事正林。” “怎么了颤殴?”我有些...
    開封第一講書人閱讀 168,814評論 0 361
  • 文/不壞的土叔 我叫張陵觅廓,是天一觀的道長。 經(jīng)常有香客問我涵但,道長杈绸,這世上最難降的妖魔是什么帖蔓? 我笑而不...
    開封第一講書人閱讀 59,869評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮蝇棉,結(jié)果婚禮上讨阻,老公的妹妹穿的比我還像新娘。我一直安慰自己篡殷,他們只是感情好钝吮,可當(dāng)我...
    茶點故事閱讀 68,888評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著板辽,像睡著了一般奇瘦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上劲弦,一...
    開封第一講書人閱讀 52,475評論 1 312
  • 那天耳标,我揣著相機與錄音,去河邊找鬼邑跪。 笑死次坡,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的画畅。 我是一名探鬼主播砸琅,決...
    沈念sama閱讀 41,010評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼轴踱!你這毒婦竟也來了症脂?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,924評論 0 277
  • 序言:老撾萬榮一對情侶失蹤淫僻,失蹤者是張志新(化名)和其女友劉穎诱篷,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體雳灵,經(jīng)...
    沈念sama閱讀 46,469評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡棕所,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,552評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了悯辙。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片琳省。...
    茶點故事閱讀 40,680評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖笑撞,靈堂內(nèi)的尸體忽然破棺而出岛啸,到底是詐尸還是另有隱情钓觉,我是刑警寧澤茴肥,帶...
    沈念sama閱讀 36,362評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站荡灾,受9級特大地震影響瓤狐,放射性物質(zhì)發(fā)生泄漏瞬铸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,037評論 3 335
  • 文/蒙蒙 一础锐、第九天 我趴在偏房一處隱蔽的房頂上張望嗓节。 院中可真熱鬧,春花似錦皆警、人聲如沸拦宣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鸵隧。三九已至,卻和暖如春意推,著一層夾襖步出監(jiān)牢的瞬間豆瘫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1 274
  • 我被黑心中介騙來泰國打工菊值, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留外驱,地道東北人。 一個月前我還...
    沈念sama閱讀 49,099評論 3 378
  • 正文 我出身青樓腻窒,卻偏偏與公主長得像昵宇,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子定页,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,691評論 2 361

推薦閱讀更多精彩內(nèi)容