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


    }
多张图片上传在文档里没有找到方法，可以用循环遍历的方式重复调用上传接口来上传。