js实现OSS上传图片,STS临时授权访问OSS

1. 引入aliyun-oss-sdk.min.js

<script type="text/javascript" src="/static/js/common/aliyun-oss-sdk.min.js"></script>

2. 通过后端接口获取临时访问权限生成OSS对象

var client = new OSS({
  endpoint: 'oss-cn-beijing.aliyuncs.com',
  accessKeyId: '<Your AccessKeyId>',
  accessKeySecret: '<Your AccessKeySecret>',
  stsToken: '<Your SecurityToken>',
  bucket: 'Your bucket name'
});

3. 上传文件

$('input').bind('change', function(e) {
        if (e.target.files && e.target.files.length > 0) {
            let file = e.target.files[0]
            var URL = window.URL || window.webkitURL;
            var imgURL = URL.createObjectURL(file);
            try {
                var reader = new FileReader();
                reader.onload = (function (file) {
                    return function (e) {

　　　　　　　　　　　　　　　　store.put(file.name, dataURItoBlob(result)).then(function () {

　　　　　　　　　　　　　　　　　　let url = store.signatureUrl(file.name);　　//　　获取上传后的文件地址

　　　　　　　　　　　　　　　　}).catch(function (err) {

　　　　　　　　　　　　　　　　　　console.log(err)

　　　　　　　　　　　　　　　　});

                    };
                })(e.target.files[0]);
                reader.readAsDataURL(e.target.files[0])
            } catch (e) {
                console.log(e)
            }
        }
    })
//　　转换成二进制

function dataURItoBlob(dataURI) {

　　var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型

　　var byteString = atob(dataURI.split(',')[1]); //base64 解码

　　var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组

　　var intArray = new Uint8Array(arrayBuffer); //创建视图　　

　　for (var i = 0; i < byteString.length; i++) {

　　　　intArray[i] = byteString.charCodeAt(i);

　　}

　　return new Blob([intArray], {type: mimeString});

}