实战营第二课笔记分享——用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文件夹,可以看到我们上传的图片