React实现阿里云OSS上传文件的示例


Posted in Javascript onAugust 10, 2020

简介

阿里云 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 权限

React实现阿里云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;
};

init = async () => {
 try {
  const OSSData = await this.mockGetOSSData();

  this.setState({
   OSSData,
  });
 } catch (error) {
  message.error(error);
 }
};
mockGetOSSData = () => {
 var policyText = {
  expiration: "2020-12-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
  conditions: [
   ["content-length-range", 0, 1048576000], // 设置上传文件的大小限制
  ],
 };
 let accesskey = "你自己的"; //不要泄露
 var policyBase64 = Base64.encode(JSON.stringify(policyText));
 let message = policyBase64;
 var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true });
 var signature = Crypto.util.bytesToBase64(bytes);

 return {
  dir: "user-dir/", //bucket中的路径
  expire: "0", //有效时间戳'1577811661',
  host: "http://om-test-oss.oss-cn-beijing.aliyuncs.com",
  accessId: "你自己的",
  policy: policyBase64, //you
  signature: signature,
 };
};

钩子函数首先计算签名是否过期,如果过期则通过init函数间接调用mockGetOSSData生成通过 Base64 等 OSS 要求方法生成签名数据。其中accessIdaccesskey是从 OSS 控制台拿到的。

生成签名数据后,利用upload组件中actionprops 直接将文件上传目的地指向 OSS 的实际有效地址,并进行上传

render() {
  const { value } = this.props;
  const props = {
   name: 'file',
   listType: "picture-card",
   fileList: value,
   action: this.state.OSSData.host,
   onChange: this.onChange,
   onRemove: this.onRemove,
   transformFile: this.transformFile,
   data: this.getExtraData,
   beforeUpload: this.beforeUpload,
  };
  return (
   <Upload {...props}>
    <Icon type="plus" />
   </Upload>
  );
 }

完整代码如下:

render() {
  const { value } = this.props;
  const props = {
   name: 'file',
   listType: "picture-card",
   fileList: value,
   action: this.state.OSSData.host,
   onChange: this.onChange,
   onRemove: this.onRemove,
   transformFile: this.transformFile,
   data: this.getExtraData,
   beforeUpload: this.beforeUpload,
  };
  return (
   <Upload {...props}>
    <Icon type="plus" />
   </Upload>
  );
 }

方式 2:前端与后端配合上传

后端鉴权接口

后端需要增加一个接口:后端利用阿里提供的 SDK,编写鉴权接口,入参是要上传的文件内容,根据控制台得到的 endpoint、AccessKey 和 AccessSecret 实例化 client,每次前端上传文件前请求本接口,服务端与阿里云 OSS 交互,根据 bucket 拿到签名后的上传、下载地址(过程中可以设置上传下载的有效期以及 Conetent-Type),将两者以及文件名返回给前端,用于前端的下一步操作。

React实现阿里云OSS上传文件的示例

前端分别请求

前端然后根据后端鉴权接口返回签名后的 puturl 采用 put 方式上传图片文件。在前端 put 上传图片成功后可以通过 geturl 拿到图片来进行网页回显,回显同时将图片名称插入到要提交表单中,最后点击提交按钮将图片路径等信息 post 到自己后端另一个接口中,后端保存到数据库。

前端程序与上文中的方式 1 大同小异,唯一不同在于mockGetOSSData函数,之前是由前端计算签名,这里是调用后端的鉴权接口来获得签名数据。

**注意:**最后一个接口调用中文件名称只有后半部分,前半部分路径是 OSS 提供的 bucket 路径,完全相同,再次展示时前端自行拼接。

上传中途失败处理

上述前端直传流程至少调用三个接口:鉴权、上传、保存。如果在上传文件后没有调用保存接口,也就是应用服务没有把 OSS 中文件关联到数据库中时会造成 OSSbucket 中有脏数据的情况,解决办法是:先让用户上传到一个临时的文件夹中,当调用保存接口后再移动到真正的 bucket 中,然后定时删除临时文件夹。

前端下载文件程序开发

与上传类似,OSS 也支持浏览器下载,在 bucket 的读写权限设置为私有后,读写均需签名才可以。举例如下:

如果上传图片到 OSS 成功后,得到的图片 url 是user-dir/1580982085120.png,如果直接拼接 OSS 前半部分为http://om-test-oss.oss-cn-beijing.aliyuncs.com/user-dir/1580982085120.png访问会提示失败,因为 OSS 有判断没有签名信息会拒绝访问,真正的签名后的图片地址是:http://om-test-oss.oss-cn-beijing.aliyuncs.com/user-dir/1580982085120.png?OSSAccessKeyId=LTAI4Fv75GobJhGFkwVzdPJq&Expires=1580983892&Signature=FZYmRRo6XnFu3INC55zJSdTWT%2Fc%3D

我们要做的就是得到签名后的下载地址。下载与上传相同,也分为是否需要服务器参与的两种方式。

方式 1:前端签名直接下载

前端签名与上传类似,根据 AccessId 与 AccessSecret 来生成签名信息。

签名信息可以在请求携带在 URL 中也可以携带在请求 header 中,为方便使用,此次调研使用前者。

本地签名使用了 OSS 提供的 SDK,react 首先安装

npm install ali-oss --save

然后在组件中引入

import OSS from "ali-oss";

封装 SDK 的签名方法简化使用

import React, { Component } from "react";
import OSS from "ali-oss";
let GetOssfileClient = new OSS({
 region: "oss-cn-beijing", //oss所在region,由运维提供
 accessKeyId: "你自己的", //oss的子accessKeyId,由运维提供
 accessKeySecret: "你自己的", //oss的子accessKeySecret,由运维提供
 bucket: "om-test-oss", //oss的buket名称,运维提供
});
export default GetOssfileClient;

上传组件的预览功能使用到了图片下载如下:

//预览可以使用本地图片也可以使用上传到oss真实图片,这里使用真实地址用来测试对oss的访问
handlePreview = (file) => {
 //file中thumbUrl是本地生成的,url是OSS文件名部分,需要签名后才能访问
 console.log("替换前的 file.url", file.url);
 let url = GetOssfileClient.signatureUrl(file.url);
 console.log(url);
 file.url = url; //替换为签名后的真实路径,
 console.log("替换后的 file.url,也就是真实地址是:", file.url);
 this.setState({
  previewImage: file.url || file.thumbUrl,
  previewVisible: true,
 });
};

这里使用 upload 组件预览功能来测试图片的下载显示。当点击预览触图标时会触发handlePreview函数,我们拿到真实图片文件的文件名,然后使用 sdk 的signatureUrl方法签名后得到真实路径,然后在 modal 中显示。

<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
 <img alt="example" style={{ width: "100%" }} src={previewImage} />
</Modal>

方式 2:前端根据后端返回的连接下载

同上述前端上传文件程序开发->方式2,前端直接使用后端代码返回的 url 来显示图片即可,后端返回的 url 已经是签名后的完整路径了。

安全起见,最好使用前后端配置上传下载

到此这篇关于React实现阿里云OSS上传文件的示例的文章就介绍到这了,更多相关React 阿里云OSS上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 #Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 #Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 #Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 #Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 #Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 #Javascript
vue 实现锚点功能操作
Aug 10 #Javascript
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
python实现查询IP地址所在地
2015/03/29 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
python实现顺序表的简单代码
2018/09/28 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
教师个人考察材料
2014/12/16 职场文书
英语感谢信范文
2015/01/20 职场文书
《法国号》教学反思
2016/02/22 职场文书
python计算列表元素与乘积详情
2022/08/05 Python