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


    }
多張圖片上傳在文檔里沒有找到方法，可以用循環遍歷的方式重復調用上傳接口來上傳。