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

2023-07-19 00:28:04 83

简介

阿里云OSS是阿里云提供的海量、安全、低成本、高可靠的云存储服务，提供99.9999999999%的数据可靠性（号称）。能够使用RESTfulAPI可以在互联网任何位置存储和访问，支持容量和处理能力弹性扩展。

基本术语

1.bucket：类似本地的一个文件夹
2.object：oss存储数据的基本单元，类似本地的一个文件。
3.region：oss存储的数据中心所在区域
4.Endpoint：oss对外服务的访问域名，oss以httpapi提供服务，不同region的edpoint不同。
5.AccessKey：访问秘钥，简称AK,包括AccessKeyId和AccessKeySecret，用于验证访问者身份。后者必须保密

跨域CROS设置

进入控制台-》基本设置-》跨域-》新增弹出对话框以后填入来源：域名和端口信息。我们如果使用类似之前Azure中blob网页直接上传的服务器的方式时需要配置跨域，域名和端口绑定我们的不同环境对应的域名和端口

OSS操作

创建文件存放位置

进入控制台-》创建bucket-》填写配置-》完成

控制台上传下载（简单测试）

文件管理-》创建目录-》上传文件

生成AccessKey及AccessSecrect

点击头像-》AccessKey管理-》开始使用子用户Key-》填写子用户名，勾选编程访问，确定-》验证码接受填写，确定-》得到key和Secret-》权限管理-》授权-》新增管理对象存储OSS权限

注意:这里必须使用子用户的key，如果用主账号容易导致提交代码时的权限泄露，一旦key和secret泄露相当于账号密码泄露，服务器就完全暴露给了别人。

API操作

实际项目中并不是依靠在控制台手工操作，而是利用程序来控制上传下载。OSS提供了一系列的restfulAPI来实现文件上传于下载。

可以利用阿里云提供的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;
constexpire=OSSData.expire*1000;

if(expire{
try{
constOSSData=awaitthis.mockGetOSSData();

this.setState({
OSSData,
});
}catch(error){
message.error(error);
}
};
mockGetOSSData=()=>{
varpolicyText={
expiration:"2020-12-01T12:00:00.000Z",//设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
conditions:[
["content-length-range",0,1048576000],//设置上传文件的大小限制
],
};
letaccesskey="你自己的";//不要泄露
varpolicyBase64=Base64.encode(JSON.stringify(policyText));
letmessage=policyBase64;
varbytes=Crypto.HMAC(Crypto.SHA1,message,accesskey,{asBytes:true});
varsignature=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要求方法生成签名数据。其中accessId与accesskey是从OSS控制台拿到的。

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

render(){
const{value}=this.props;
constprops={
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(



);
}

完整代码如下：

render(){
const{value}=this.props;
constprops={
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(



);
}

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

后端鉴权接口

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

前端分别请求

前端然后根据后端鉴权接口返回签名后的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首先安装

npminstallali-oss--save

然后在组件中引入

importOSSfrom"ali-oss";

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

importReact,{Component}from"react";
importOSSfrom"ali-oss";
letGetOssfileClient=newOSS({
region:"oss-cn-beijing",//oss所在region，由运维提供
accessKeyId:"你自己的",//oss的子accessKeyId,由运维提供
accessKeySecret:"你自己的",//oss的子accessKeySecret,由运维提供
bucket:"om-test-oss",//oss的buket名称，运维提供
});
exportdefaultGetOssfileClient;

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

//预览可以使用本地图片也可以使用上传到oss真实图片，这里使用真实地址用来测试对oss的访问
handlePreview=(file)=>{
//file中thumbUrl是本地生成的，url是OSS文件名部分，需要签名后才能访问
console.log("替换前的file.url",file.url);
leturl=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中显示。

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

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

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐