详情请参考：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:如何看自己的文件读写权限？

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

　　

阿里云使用js 实现OSS图片上传、获取OSS图片列表、获取图片外网访问地址(读写权限私有、读写权限公共);的更多相关文章

  1. 使用FormData数据做图片上传： new FormData() canvas实现图片压缩

    使用FormData数据做图片上传: new FormData()       canvas实现图片压缩 ps: 千万要使用append不要用set   苹果ios有兼容问题导致数据获取不到,需要后台 ...

  2. OSS文件上传及OSS与ODPS之间数据连通

    场景描述        有这样一种场景,用户在自建服务器上存有一定数量级的CSV格式业务数据,某一天用户了解到阿里云的OSS服务存储性价比高(嘿嘿,颜值高),于是想将CSV数据迁移到云上OSS中,并且 ...

  3. 用Ajax图片上传、预览、修改图片

    首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png&quo ...

  4. kindeditor修改图片上传路径-使用webapi上传图片到图片服务器

    kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...

  5. 阿里云负载均衡SLB的文件上传下载问题解决

    Nfs同步文件夹配置 问题描述 : javaweb应用部署到云服务器上时,当服务器配置了SLB负载均衡的时候,多台服务器就会造成文件上传下载获取不到文件的错误, 解决办法有:1.hdfs  2.搭建f ...

  6. 阿里云Linux CentOS8.1 用 xshell 上传和下载文件

    下载: 例如有一个script 文件夹,我们要把它打包成 tar文件,并下载到本地.具体命令如下: 1.进入script 所在的目录,先打包,命令如下: tar -cvf script.tar scr ...

  7. php将富文本内容图片上传到oss并替换

    /** * php 提取html中图片并替换 */ //要替换的内容 //提取图片路径的src的正则表达式 $match_str = '/(<img([^>]*)\s*src=(\'|\& ...

  8. 图片上传（3）（组件 -- 图片大小宽高限制）base64图片宽高读取

    1.上传组件(可上传多个文件) <template> <div class="attachmentN"> <span class="btnS ...

  9. 最近使用ajaxFileUpload和Jcrop来实现图片上传和截图，出现一个图片无法更换的问题

    使用setImage 都无法更换 刷新图片 找了很久 什么方法都找过,最后发现...... 原来是 上传的图片的命名问题... 每次上传的图片 保存后都是同样的图片, 所以返回路径都是一样... jc ...

随机推荐

  1. [转载]Meta Learning单排小教学

    原文链接:Meta Learning单排小教学 虽然Meta Learning现在已经非常火了,但是还有很多小伙伴对于Meta Learning不是特别理解.考虑到我的这个AI游乐场将充斥着Meta ...

  2. CF1091E New Year and the Acquaintance Estimation

    题目地址:CF1091E New Year and the Acquaintance Estimation 首先,易知 \(ans\) 的奇偶性与所有给出的数的和的奇偶性相同 其次,易证 \(ans\ ...

  3. DAC杂谈二 ——ADC和DAC常用技术术语

    采集时间 采集时间是从释放保持状态(由采样-保持输入电路执行)到采样电容电压稳定至新输入值的1 LSB范围之内所需要的时间.采集时间(Tacq)的公式如下: 混叠 根据采样定理,超过奈奎斯特频率的输入 ...

  4. CDHtmlDialog探索----Javascript与窗体交互

    CDHtmlDialog提供了C++与网页的双向交互,通此一系统简单的宏调用可以把网页中各元素的事件直接映射到C++程序中,而在网页中调用C++功能代码就显的不那么直观了.归根结底交互的基理就是实现相 ...

  5. 题解-CodeForces835F Roads in the Kingdom

    Problem CodeForces-835F 题意:求基环树删去环上任意一边后直径最小值,直径定义为所有点对最近距离的最大值 Solution 首先明确删去环上一点是不会影响树内直径的,所以应当先把 ...

  6. 3-html 缩写-地址-文字方向-引用块-题注的格式

    HTML Quotation and Citation Elements Tag Description <abbr> Defines an abbreviation or acronym ...

  7. 查看当前APP打开的是哪个Activity

    按下 “window键+R键” 打开电脑的 “运行” 窗口,输入“cmd”,进入你的adb.exe所在的目录,输入 “ adb shell "dumpsys window | grep mC ...

  8. Codeforces 1117G Recursive Queries [线段树]

    Codeforces 洛谷:咕咕咕 思路 设\(L_i,R_i\)为\(i\)左右第一个大于它的位置. 对于每一个询问\(l,r\),考虑区间每一个位置的贡献就是\(\min(r,R_i-1)-\ma ...

  9. STM32应用实例十四：利用光敏二极管实现光度测量

    最近我们在开发臭氧发生器时,需要监测生成的臭氧的浓度,于是想到使用光度计来测量.因为不同浓度的臭氧对管的吸收作用是不相同的,于是检测光照强度的变化就可以得到相应的浓度数据. 1.硬件设计 此次光照度检 ...

  10. Markdown 简介及基础语法

    一.Markdown 简介 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 二.Markdown 基础语法 1. Markdown ...