笔记分享二

本文档详细介绍了如何使用阿里云OSS服务进行图片上传和展示。步骤包括创建OSS对象存储实例,配置跨域权限,创建RAM用户并设置权限,以及通过NodeJS应用实现浏览器直传文件。最后,通过实际操作展示了图片成功上传至OSS并能在网页上展示。
摘要由CSDN通过智能技术生成

实战营第二课笔记分享——用OSS上传和展示图片

原理

  • 在用户的浏览器端函数计算派发一个签名,用这个签名直接访问oss的文件存储,由此上传文件并且能够展示文件
    在这里插入图片描述

纲要

在这里插入图片描述

OSS对象存储实例创建

可以根据阿里云提供的文档进行相关配置OSS文件浏览器直传方案
①在阿里云平台搜索oss,点击对象存储OSS
在这里插入图片描述
②若没有开通服务,需要开通
在这里插入图片描述
③点击Bucket列表,创建Bucket
在这里插入图片描述
④输入Bucket名称,并且选择地域,注意图中标出的地方最好不要开通,收费的
在这里插入图片描述
在这里插入图片描述
⑤进行权限管理,如图跨域设置,根据阿里云提供的文档进行配置如图在这里插入图片描述
在这里插入图片描述
⑥在文件管理处新建一个目录,以便后面存放文件
在这里插入图片描述

RAM访问控制用户创建

①在阿里云平台搜索RAM,点击访问控制
在这里插入图片描述
②点击用户,创建用户,设置登录名称和显示名称,勾选编程访问以便为我们提供一个新的AccessKey ID和AccessKey secret
在这里插入图片描述
在这里插入图片描述
③记录此处的AccessKey ID和AccessKey secret,以备后面应用配置使用
在这里插入图片描述
④对此用户进行权限设置,我们选择新建权限策略以此提供仅限当前用户访问的权限
在这里插入图片描述
⑤根据阿里云提供的文档,将复制来的代码中的oss名称改为我们自己创建的oss
在这里插入图片描述
⑥为此用户配置我们刚才自定义设置的权限
在这里插入图片描述

OSS浏览器直传文件应用

①新建一个应用,选择NodeJS语言直接创建应用
在这里插入图片描述
在这里插入图片描述
②填写相关信息
在这里插入图片描述
③开通相关服务
在这里插入图片描述
④根据上方提供的阿里云超链接文档中提供的环境变量配置,我们将相关配置代码复制到日常环境的应用配置中,将我们前面记录的信息粘贴到相应位置

  • AKID=安全受限的 Access key ID
  • AKSK=Access key secret
  • REGION=OSS 所在的 Region
  • OSSBUCKET=Bucket 名称
  • OSSDIR=上传目录
    在这里插入图片描述
    ⑤新建index.html文件,将阿里云文档中提供的浏览器端直传代码复制到此文件中
    在这里插入图片描述
    ⑥新建osstoken.js文件,将阿里云文档提供NodeJS 版本代码复制到此文件中
    在这里插入图片描述
    ⑦需要请求api,提供一条osstoken的路由,达到传输文件的目的
    在这里插入图片描述
    ⑧进行部署
    在这里插入图片描述

应用测试

①点击应用管理中日常环境的域名配置访问此域名,如图将跳转到此页面
在这里插入图片描述
②我们选择一张图片上传,如图
在这里插入图片描述
③在oss文件管理页面,打开我们创建的存放文件的image文件夹,可以看到我们上传的图片
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值