詳情請參考：https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.763.ZgC59a
或者https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.762.EmuWIt
這里寫的是最簡單的寫法，只是實現其簡單的功能
1.引入js文件
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
2.填寫配置信息
var client = new OSS.Wrapper({
region: 'oss-cn-beijing',//你的oss地址 ，具體位置見下圖
accessKeyId: 'xxxxxxxxxxxxxxx',//你的ak
accessKeySecret: 'xxxxxxxxxxxxx',//你的secret
//stsToken: '<Your securityToken(STS)>',//這里我暫時沒用，注銷掉
bucket: 'your oss name'//你的oss名字
});
region 你的oss地址
前提是你需要先創建一個Bucket
如上圖 在你的oss控制台
oss-cn-后面的便是你的oss地址
accessKey和accessKeySecret
在訪問控制 --> 用戶管理 --> 點擊你的用戶
如果 忘記 accessKeySecret 需要點擊創建AccessKey 重新獲取。
bucket名字 就是你創建oss時候的名字
可以在下圖看到
點擊 對象存儲 --> 就可以看到你的oss名字了。
配置信息填寫完成后就可以實現上傳下載功能了。(這里我用的ak是管理員的ak擁有所有的權限,增刪改差)
3.獲取oss文件列表
完整寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="file" name="" id="file" value="" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script type="text/javascript">
var client = new OSS.Wrapper({
region: '這里填寫你的oss地址',
accessKeyId: '這里填寫你的ak',
accessKeySecret: '這里填寫你的aks',
bucket: '這里填寫你的oss名稱'
});
//獲取oss文件列表
client.list({
'max-keys': 10
}).then(function (result) {
console.log(result);
}).catch(function (err) {
console.log(err);
});
</script>
</body>
</html>
將上方代碼完整復制，然后更改
region、accessKeyId、accessKeySecret、bucket這四個值，就可以看到在控制台打印輸出文件列表。
4.上傳文件 到oss
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="file" name="" id="file" value="" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script type="text/javascript">
var client = new OSS.Wrapper({
region: '這里填寫你的oss地址', accessKeyId: '這里填寫你的ak', accessKeySecret: '這里填寫你的aks', bucket: '這里填寫你的oss名稱'
});
$("#file").change(function(){
console.log("change");
client.multipartUpload("testImg", this.files[0]).then(function (result) {
console.log(result);
}).catch(function (err) {
console.log(err);
});
});
</script>
</body>
</html>
將代碼復制，然后更改
region、accessKeyId、accessKeySecret、bucket這四個值，
運行此代碼，然后選擇文件，便可以實現上傳功能。
5. 獲取圖片外網訪問地址
獲取client后
如果圖片讀寫權限為私有
client.signatureUrl("你的圖片地址/名字")
例如我的圖片(名字為testImg)在根目錄
client.signatureUrl("testImg");//返回的就是帶加密簽名的圖片路徑，復制這個路徑到瀏覽器上，便可以實現瀏覽
如果圖片的讀寫權限為公共
client.getObjectUrl("你的圖片名字");//返回的就是不帶簽名的圖片路徑，復制路徑也可以在瀏覽器上訪問.
ps:如何看自己的文件讀寫權限？
點擊要看的文件，然后最下方選擇設置讀寫權限。
