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

最新推荐文章于 2024-01-26 14:28:39 发布
最新推荐文章于 2024-01-26 14:28:39 发布
阅读量1w 收藏 7
点赞数
分类专栏： .NetCore
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haitaoDoit/article/details/85296954
版权

1.引入js文件

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

2.填写配置信息

1

2

3

4

5

6

7

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文件列表

完整写法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!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>

　　将上方代码完整复制，然后更改

1

region、accessKeyId、accessKeySecret、bucket这四个值，就可以看到在控制台打印输出文件列表。<br><br><br><br><span style="font-size: 18pt">4.上传文件 到oss</span><br><br>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!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({

1

2

3

4

        region: '这里填写你的oss地址',

accessKeyId: '这里填写你的ak',

accessKeySecret: '这里填写你的aks',

bucket: '这里填写你的oss名称'<br><br>　　　　　　　　　　});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<em id="__mceDel">

          $("#file").change(function(){

            console.log("change");

            client.multipartUpload("testImg", this.files[0]).then(function (result) {

                console.log(result);

 

注：有时候会出现result.url没有值的情况。

但是result.res.requestUrls[0]会有值，只需要result.res.requestUrls[0].substr(0, result.res.requestUrls[0].indexOf("?"))截取一下就好了。

 

              }).catch(function (err) {

                console.log(err);

              });

          });

           

        </script>

    </body>

</html>

</em>

　　

 将代码复制，然后更改

1

region、accessKeyId、accessKeySecret、bucket这四个值，<br>运行此代码，然后选择文件，便可以实现上传功能。<br><br>

5. 获取图片外网访问地址

获取client后 

如果图片读写权限为私有

client.signatureUrl("你的图片地址/名字")

例如我的图片(名字为testImg)在根目录

client.signatureUrl("testImg");//返回的就是带加密签名的图片路径，复制这个路径到浏览器上，便可以实现浏览

 

如果图片的读写权限为公共

client.getObjectUrl("你的图片名字");//返回的就是不带签名的图片路径，复制路径也可以在浏览器上访问.

 

ps:如何看自己的文件读写权限？

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

参考：http://www.cnblogs.com/MainActivity/p/8492211.html

LeoHaiTao
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
oss pdf浏览器直接下载_前端从阿里云oss直接下载文件的方法
weixin_33321740的博客
12-23 3730
HTTP下载，即浏览器下载。浏览器中使用signatureUrl方法生成可下载的HTTP地址，URL的有效时间默认为半个小时。以下代码用于HTTP下载：let OSS = require("ali-oss");let client = new OSS({region: "",accessKeyId: "",accessKeySecret: "",bucket: ""，});let url = c...
java获取网络图片上传到OSS的方法
08-26
主要为大家详细介绍了java获取网络图片上传到OSS，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决：阿里云OSS访问图片地址默认下载而不是在线预览
热门推荐
程序和我有一个能跑就行了
06-23 2万+
找到你设置文件类型的地方 getContentType方法中。 注意：下图圈红的地方。在线预览必须设置为：image/jpg类型，如果你访问后默认下载，检查下是不是设置成了image/jpeg。
使用Lychee搭建个人图片存储系统并进行远程访问设置实现公网访问本地私人图床
m0_73879806的博客
11-18 567
图床作为图片集中存放的服务网站，可以看做是云存储的一部分，既可以作为我们存放照片的存储空间，也可以建立外链成为网站或者文章的图片来源。但随着大厂运营的云存储日薄西山，各个图床的日子也不好过，甚至有的图床已经关门歇业。在这样的情况下，自建图床似乎成了唯一靠谱的选择。今天，笔者就为大家展示，使用Cpolar+ Lychee，建立一个简洁漂亮的私人图床网站。
前端使用阿里Oss
最新发布
qq_41956361的博客
01-26 1361
js 使用阿里oss
解决阿里云OSS使用URL无法访问图片的两种方法
08-18
主要介绍了解决阿里云OSS使用URL无法访问图片的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Java 上传图片至OSS并返回图片地址工具类可直接用
weixin_45396665的博客
04-27 1355
OSS上传图片并返回图片地址 OSS上传图片并且返回地址工具类 可以直接拿去用 后续会继续更新 需要注意的点: 下面代码里的@Value里的几个值我是放在application.yml文件里的,可以在OSS官网上找到,放入自己的OSS数据值,可以百度OSS管理控制台 aliyun: endpoint: accessKeyId: accessKeySecret: bucketName: accessUrl: package com.test.utils; import com.aliy
前端-- 微信小程序图片直传阿里云OSS（bucket私有权限）和防盗链之URL签名标签的实现---总结（排坑）篇
weixin_42112865的博客
05-21 7534
前端-- 微信小程序图片直传阿里云OSS（bucket私有权限）和防盗链之URL签名标签的实现—总结（排坑）篇 为了减轻服务器的压力，公司开发的微信小程序最近开始改为使用啊里云的oss服务来存放图片。用户通过手机相册选择图片（类似发朋友圈）发表，前端调用微信接口直接把图片上传到阿里云的oss存储空间（权限设为私有），后端和前端约定图片的路径，后端拼接图片的url存放在数据库，前端从后台调来的url...
从oss拿到图片的url
weixin_43965878的博客
02-09 2419
目的方便前端展示页面图片 我上一个博客写的是上传文件到oss 从oss那里拿到url很简单， 你只要把这些话加到上传文件的util里面，让他返回的是路径，让他上传的同时，返回一个url路径，保存在数据库中， 剩下的就不用说了吧… //返回图片所在的全部路径，方便前端访问 //设置过期时间为100年 Date expirati...
uniapp解决阿里云OSS获取图片时私有Bucket（防盗链）的签名问题
qq_36656155的博客
07-13 4100
使用npm包与js文件的兼容性区别 平台 npm js文件 小程序MP ✔ ✔ H5 ✔ ✔ APP × ✔ 防盗链：对象存储OSS支持对存储空间（Bucket）设置防盗链，即通过对访问来源设置白名单的机制，避免OSS资源被其他人盗用。 简单来说：阿里云OSS将文件夹的权限设置成私有的情况下，就需要先获取到签名才可以访问。类似一些用户的身份证照片，比较隐私的图片。可以设置防盗链来防止黑客获取。 ...
阿里云oss使用签名url上传时的一些配置注意事项
dorlolo的博客
11-20 564
如果你是前端，你会发现这个请求头是没办法去掉的，除非你自己写一个包。没有任何效果，并且阿里云的文档中心也写明必须要设置成这样，就不要多做纠结了。此时，我们在bucket的跨域访问规则中，将允许 Headers设置为。你可以先按照阿里云的文档把一些oss的基本配置弄好，再看下面的内容；这是非常重要的一步。默认情况下，oss不允许上传文件时携带。代码中生成签名url时，设置的过期时间不能低于。
js代码实现图片上传阿里云OSS
09-20
基于plupload封装 支持html5,flash,silverlight,html4 等协议上传 可以运行在PC浏览器，手机浏览器，微信 可以选择多文件上传 显示上传进度条
前端js获取阿里云oss私有图片加参数及生成签名signature的sdk
08-30
前端js获取阿里云oss私有图片加参数及生成签名signature的sdk
阿里云OSS上传视频上传图片sdk及样例代码
03-17
阿里云OSS上传视频上传图片sdk及样例代码
使用Consul作为配置中心，配置Asp.Net Core应用程序
张海涛
07-11 3025
背景：通常，.Net 应用程序中的配置存储在配置文件中，例如 App.config、Web.config 或 appsettings.json。从 ASP.Net Core 开始，出现了一个新的可扩展配置框架，它允许将配置存储在配置文件之外，并从命令行、环境变量等等中检索它们。 配置文件的问题是它们很难管理。实际上，我们通常最终做法是使用配置文件和对应的转换文件，来覆盖每个环境。它们需要与 dll...
ASP.NET Core WebApi使用Swagger生成API说明文档
张海涛
07-03 2405
首先微软官方给了简单的例子，参考这个例子就可以生成简单的可视化文档。 微软官网文档地址:点击打开链接 首先新建一个WebAPI项目，Edu.Swagger 然后打开“程序包管理控制台”使用NuGet安装  Swashbuckle.AspNetCore Install-Package Swashbuckle.AspNetCore 配置Startup.cs文件 将 Swagger...
visual studio 新增外部工具
张海涛
11-21 1427
外部工具 快捷运行项目：选中项目，然后选择工具=&gt;Dotnet run  也可以快捷键ALT + T + E 即时编译项目：选中项目，然后选择工具=&gt;Watch run  也可以快捷键ALT + T + R    ...
IdentityServer4 去掉验证
张海涛
06-25 1078
IdentityServer4 去掉默认验证UserManager.UserValidators.Clear();
阿里云oss存储图片如何设置私有访问
04-20
对于阿里云oss存储图片如何设置私有访问，您可以通过以下步骤来实现： 1. 在oss控制台中创建一个Bucket，选择“私有读写”权限。 2. 在Bucket中上传您的图片。 3. 在Bucket中选择图片，点击“更多操作”-“管理权限”。 4. 将权限设置为“私有”，并勾选“允许匿名访问”。 5. 将Bucket中的图片URL转换为带签名的URL，确保只有带有签名的请求才能访问图片。您可以通过阿里云SDK或者API来生成签名URL。 注意：私有Bucket中的图片只有拥有签名URL的请求才能访问，其他请求均无法访问图片。建议您保存好签名URL，以便后续使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值