React实现阿里云OSS上传文件的示例
78 浏览量
2020-10-14
23:05:02
上传
评论 1
收藏 223KB PDF 举报
React实现阿里云实现阿里云OSS上传文件的示例上传文件的示例
主要介绍了React实现阿里云OSS上传文件的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一
起学习学习吧
简介简介
阿里云 OSS 是 阿里云提供的海量、安全、低成本、高可靠的云存储服务，提供 99.9999999999%的数据可靠性（号称）。能够使用 RESTful API 可以在互联网任何位置存储和访问，支持容量
和处理能力弹性扩展。
基本术语基本术语
1.bucket ：类似本地的一个文件夹
2.object ： oss 存储数据的基本单元，类似本地的一个文件。
3.region：oss 存储的数据中心所在区域
4.Endpoint：oss 对外服务的访问域名，oss 以 http api 提供服务，不同 region 的 edpoint 不同。
5.AccessKey：访问秘钥，简称 AK,包括 AccessKeyId 和 AccessKeySecret，用于验证访问者身份。后者必须保密
跨域跨域 CROS 设置设置
进入 控制台-》基本设置-》跨域-》新增 弹出对话框以后填入来源：域名和端口信息。我们如果使用类似之前 Azure 中 blob 网页直接上传的服务器的方式时需要配置跨域，域名和端口绑定我们
的不同环境对应的域名和端口
OSS 操作操作
创建文件存放位置
进入控制台-》创建 bucket -》填写配置 -》完成
控制台上传下载（简单测试）控制台上传下载（简单测试）
文件管理-》创建目录 -》上传文件
生成生成 AccessKey 及及 AccessSecrect
点击头像 -》AccessKey 管理 -》开始使用子用户 Key -》填写子用户名，勾选编程访问，确定 -》验证码接受填写，确定 -》得到 key 和 Secret -》权限管理-》授权 -》新增管理对象存储 OSS
权限
注意:这里必须使用子用户的 key，如果用主账号容易导致提交代码时的权限泄露，一旦 key 和 secret 泄露相当于账号密码泄露，服务器就完全暴露给了别人。
API 操作操作
实际项目中并不是依靠在控制台手工操作，而是利用程序来控制上传下载。OSS 提供了一系列的 restful API 来实现文件上传于下载。
可以利用阿里云提供的 SDK 简化实现。具体见下文。
前端上传文件程序开发前端上传文件程序开发
基本流程基本流程
在实际项目中，一般采用分布式及微服务的 web 业务系统中，文件的上传和下载都是直接在前端来实现对 oss 的操作。也就是前端直接上传，不通过自己的服务器。这样能够实现系统无阻碍的
横向扩展。另一个原因是如果要把文件保存在运行 web 服务器的同一台服务器上时，那么在文件上传时可能会占满带宽，影响 web 的访问。分开存储不占服务器带宽。
阿里 OSS 提供了三种前端直传方式：
1.浏览器签名后直接上传 OSS(无需服务端干预)
2.浏览器请求服务器签名地址后上传(需要服务端配合)
3.浏览器请求服务器签名地址后上传并回调服务端(需要服务端配合)
实际生产环境考虑到安全性必须选择第二种，需要服务端与前端相配合，当安全性要求不高时可采用第一种方式。分别如下。
方式方式 1：前端直传（无须服务端干预）：前端直传（无须服务端干预）
为保证文件的安全性，一般设置 bucket 为私有，也就是鉴权以后的用户才能访问 OSS 中的内容。前端直传的原理是在浏览器端根据 OSS 控制台提供的 AccessId 和 AccessSecret 生成签名直
接上传，不需要经过服务端，优点是使用简单，缺点是不安全。
React 搭配 antd 中 upload 组件实现如下：
upload 组件提供了 beforeUpload钩子函数，在执行向 OSSpost 文件前我们先在本地计算好 OSS 要求的签名，如下：
beforeUpload = async () => {
const { OSSData } = this.state;
const expire = OSSData.expire * 1000;
if (expire < Date.now()) {
await this.init();
}
return true;
资源评论
weixin_38571603
- 粉丝: 3
- 资源: 926
