当前位置: 首页 > Web前端 > HTML5

前端文件花式直接上传OSS!后台:那我去?

时间:2023-04-04 23:05:59 HTML5

1。Introduction前端还在向后端发送文件吗?你的服务器能处理吗?什么……老板砸钱加机器?!告别!/Gotou前后端文件传输涉及到大数据,往往成为很多项目的性能瓶颈。有许多常见的传输方法。相对来说,OSS直传可以减轻很多压力。在本文中,我们将列举几种常见的传输方式和oss直传,并列出它们的优缺点。二、常用方法1、表单上传表单上传文件是最常用的方法,前后端开发小伙伴都非常容易上手。过程如下图所示。优点:简单方便,开发量小前后端原生支持,不需要额外的第三方库支持。但是在前端需要将文件转成base64数据,这样不仅会增加一些性能消耗,还会增加传输的数据量。至于后端,如果不想直接存储base64数据,同样需要转成文件再存储,同样会增加后端的性能消耗。这种上传方式可以应用于ResetfulApi,也可以应用于文件加密、回调接口携带文件等。过程如下图所示。优点:适用于ResetfulApi,可用于加密、回调等场景,更灵活缺点:前后端文件和base64数据的转换比较消耗性能,只适用于小文件3.OSS直传这里的OSS直传方案都是使用了阿里云的OSS产品,下面将介绍三种方案,分别适用于不同的场景。1.Browser.jsSDK上传该方案可以通过前端的browser.js直接上传文件到OSS,分为三个步骤:前端使用SDK直接上传到OSS。文件是否存在(可选)流程如下图所示。Browser.js方法需要在前端安装阿里云库ali-oss,然后在前端调用。直接转账还需要OSS账号的Key和Secret。所以为了安全起见,需要先建立一个RAM账号,然后前端先向后端申请一个STS临时访问凭证,完成直接转账。过程如下图所示。2、Javascript客户端签名直传Javascript客户端签名直传,需要先从后台获取临时签名,过程和上一步中的browser.js方案大致相同,不同的是:没有第三方需要库支持,表单上传原生支持后端上传回调(下一步会介绍),其流程如下图所示。不过这个方案完成后,感觉最大的问题就是权限配置有点繁琐。。。/泪3.服务端签名直传和设置上传回调这个方案其实就是上面的方案-Javascript客户端签名直传升级版,增加了后台上传回调功能。不错~前端需要改动的很少。您只需要在请求参数中添加回调参数即可。该参数由后端加密后在签名请求的响应中一起返回。后端回调接口内部加密。前端直传完成后,后端回调接口会收到相关的文件参数,包括文件路径、大小、类型等,最后OSS会将回调接口的响应转发给前端进行响应直接传输到OSS的请求。其流程如下图所示。4、与传统方式相比,直接OSS传输存在三个缺点:上传慢:用户数据需要先上传到应用服务器,再上传到OSS。网络传输时间是直接传输到OSS的两倍。如果用户数据不通过应用服务器中转,而是直接传输到OSS,速度会大大提高。而且OSS采用BGP带宽,可以保证各地不同运营商之间的传输速度。扩展性差:如果后续用户很多,应用服务器就会成为瓶颈。成本高:需要准备多台应用服务器。由于OSS上传流量是免费的,如果不经过应用服务器,直接将数据传输到OSS,可以节省几个应用服务器。当然,对于小规模、低成本的项目,普通的上传方式还是适用的。毕竟,没有最好,只有最适合。5.参考文档Web端上传介绍JavaScript客户端签名直传服务端签名直传并设置上传回调6.原博客链接到我的博客