h5頁面通過阿裡雲的broswer-js-sdk上傳檔案

之前做過上傳圖檔的操作都是傳給伺服器端，再由伺服器端上傳至阿裡雲的oss上，最近做的一個項目有頻繁上傳圖檔的操作為了減少請求時間決定用阿裡雲的sdk直接由前端上傳。

關于sdk阿裡雲的文檔有詳細說明：https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.766.EzLJ4T；

首先，這個sdk是基于node環境的，是以必須要伺服器端去搭建node環境支援。其次為了不在網頁中暴露AccessKeyId和AccessKeySecret，我們授權伺服器申請臨時權限，采用STS進行臨時授權。（參考OSS使用STS設定子賬号和STS的Policy，參考Node.js STS AppServer搭建自己的授權伺服器。）

下面主要介紹前端代碼邏輯（主要用于上傳圖檔）：

var appServer = \'XXX\';//授權伺服器URL
    var bucket = \'XXX\';//OSS檔案名稱
    var region = \'XXX\';//OSS區域

    var urllib = OSS.urllib;
    var Buffer = OSS.Buffer;
    var OSS = OSS.Wrapper;
    var STS = OSS.STS;


//關聯到oss，上傳時執行函數
    var applyTokenDo = function (imgUrlBlob) { //imgUrlBlob為blob格式的圖檔路徑
        var url = appServer;
        return urllib.request(url, {
            method: \'GET\'
        }).then(function (result) {
            console.log(result)
            var creds = JSON.parse(result.data);
            var client = new OSS({
                region: region,
                accessKeyId: creds.AccessKeyId,
                accessKeySecret: creds.AccessKeySecret,
                stsToken: creds.SecurityToken,
                bucket: bucket
            });
            return upload(client,imgUrlBlob,sucFunc);
        });
    };

//上傳圖檔到oss
    var upload = function(client,imgUrlBlob){
        var ind = 0;
 
            // blob轉arrayBuffer
            var reader1 = new FileReader();
            reader1.readAsArrayBuffer(imgUrlBlob]);
            var suffix =imgUrlBlob.type.split(\'/\')[1];

            reader1.onload = function (event) {
                var storeAs = \'檔案目錄/檔案名稱\'+ \'.\'+suffix;
     
                // arrayBuffer轉Buffer
                var buffer = new Buffer(event.target.result);

                // 單張圖檔上傳
　　　　　　　　　　
                client.put(storeAs, 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);
                });


    }
多張圖檔上傳在文檔裡沒有找到方法，可以用循環周遊的方式重複調用上傳接口來上傳。

發表于

2018-05-16 19:21

喵小喵

閱讀(1636)

評論(0)

編輯

舉報