阿里雲使用js 實現OSS圖片上傳、獲取OSS圖片列表、獲取圖片外網訪問地址(讀寫權限私有、讀寫權限公共);

時間 2019-11-12

標籤阿里使用實現 oss 圖片上傳獲取列表訪問地址讀寫權限私有公共欄目阿里巴巴简体版

原文原文鏈接

詳情請參考：https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.763.ZgC59ajavascript

或者https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.762.EmuWIthtml

這裏寫的是最簡單的寫法，只是實現其簡單的功能java

1.引入js文件jquery

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>瀏覽器

2.填寫配置信息app

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地址this

前提是你須要先建立一個Bucket加密

如上圖在你的oss控制檯spa

oss-cn-後面的即是你的oss地址code

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:如何看本身的文件讀寫權限？

點擊要看的文件，而後最下方選擇設置讀寫權限。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。