Web前端技术上传OSS介绍

本教程介绍如何利用 Web 前端技术将文件上传到 OSS。

背景信息

每个 OSS 的用户都会用到上传服务。Web 端常见的上传方法是用户在浏览器或 APP 端上传文件到应用服务器,应用服务器再把文件上传到 OSS。具体流程如下图所示。

Web前端技术上传OSS介绍

和数据直传到 OSS 相比,以上方法有三个缺点:

  • 上传慢:用户数据需先上传到应用服务器,之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转,而是直传到OSS,速度将大大提升。而且OSS采用BGP带宽,能保证各地各运营商之间的传输速度。
  • 扩展性差:如果后续用户多了,应用服务器会成为瓶颈。
  • 费用高:需要准备多台应用服务器。由于OSS上传流量是免费的,如果数据直传到OSS,不通过应用服务器,那么将能省下几台应用服务器。

技术方案

目前通过 Web 前端技术上传文件到 OSS,有三种技术方案:

  • 利用OSS Browser.js SDK 将文件上传到 OSS
    该方案通过OSS Browser.js SDK直传数据到 OSS,详细的 SDK Demo 请参考上传文件。在网络条件不好的状况下可以通过断点续传的方式上传大文件。该方案在个别浏览器上有兼容性问题,目前兼容 IE10 及以上版本浏览器,主流版本的 Edge、Chrome、Firefox、Safari 浏览器,以及大部分的 Android、iOS、WindowsPhone 手机上的浏览器。更多信息请参见安装 Browser.js SDK。

    说明 Browser.js SDK 已经支持大部分的 OSS API 接口,包含文件管理、自定义域名设置、图片处理等。

  • 使用表单上传方式,将文件上传到 OSS
    利用 OSS 提供的 PostObject 接口,使用表单上传方式将文件上传到 OSS。该方案兼容大部分浏览器,但在网络状况不好的时候,如果单个文件上传失败,只能重试上传。操作方法请参见 PostObject 上传方案。

    说明 关于 PostObject 的详细介绍请参见 PostObject。

  • 通过小程序上传文件到 OSS

    通过小程序,如微信小程序、支付宝小程序等,利用 OSS 提供的 PostObject 接口来实现表单上传。操作方式请参见小程序上传实践。

发布者:佚, 佚名,转转请注明出处:https://www.cms2.cn/aliyun/2959.html

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 2019年5月13日
下一篇 2019年5月13日

相关推荐

  • 部署RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种客户端,如:Python、Ruby、.NET、Java、JMS、C、PHP、ActionScript、XMPP、STOMP 等,支持 AJAX。用于在分布式系统中存储转发消息,在易用性、扩…

    2019年3月21日 阿里云
  • AttachVServerGroups

    除通过 AttachLoadBalancers 添加负载均衡实例外,您还可以通过 AttachVServerGroups 添加负载均衡实例下的一个或者多个虚拟服务器组。 描述 由于负载均衡存在 ,向伸缩组添加虚拟服务器组时需要满足以下条件: 负载均衡实例与伸缩组必须属于同一账号。…

    2019年9月3日
  • 云服务器ecs什么意思

      云服务器ECS(Elastic Compute Service)是阿里云提供的性能卓越、稳定可靠、弹性扩展的IaaS(Infrastructure as a Service)级别云计算服务。云服务器ECS免去了您采购IT硬件的前期准备,让您像使用水、电、天然气等公共…

    2020年11月15日
  • OSS防盗链(Referer)配置及错误排除

    什么是Referer Referer是HTTP Header的一部分,当浏览器向Web服务器发送请求时,一般会带上Referer,告诉服务器从哪个页面链接过来的。 Referer的作用 防盗链。比如,网站访问自己的图片服务器,图片服务器取到Referer来判断是不是自己的域名,如…

    2019年4月17日
  • ResetAccountPassword

    调用ResetAccountPassword接口重置账号密码。 实例状态需要为运行中,否则操作将失败。 说明 该接口暂不支持对SQL Server 2017集群版、PostgreSQL、PPAS实例通过SQL创建的账号进行密码重置。 调试 前往【】在线调试,API Explore…

    2019年7月7日
  • RemoveTagsFromResource

    调用RemoveTagsFromResource接口解绑标签。 限制条件如下: 单次最多支持解绑10个标签; 若一个标签所绑定的实例全都解绑,则该标签自动删除; 若解绑标签时仅传入标签键(TagKey),未传入标签值(TagValue),则解绑所有符合标签键条件的标签。 必须传入…

    2019年7月7日

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注