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

}