阿里云使用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:如何看本身的文件读写权限？

点击要看的文件，而后最下方选择设置读写权限。