OSS直传与UXCore-Uploader实践

本文涉及的产品
对象存储 OSS,20GB 3个月
阿里云盘企业版 CDE,企业版用户数5人 500GB空间
日志服务 SLS,月写入数据量 50GB 1个月
简介: 本文是我们OSS的用户自己写的一篇文章,笔者做了简单的修改。这里代发。感谢这位用户对OSS的了解如此深! 背景 视联网业务中,需要存储大量的图片、视频等素材资源,为应对这种大数据文件的存储,就接入了阿里云对象存储服务(Object Storage Service,简称 OSS)。

本文是我们OSS的用户自己写的一篇文章,笔者做了简单的修改。这里代发。感谢这位用户对OSS的了解如此深!

背景

视联网业务中,需要存储大量的图片、视频等素材资源,为应对这种大数据文件的存储,就接入了阿里云对象存储服务(Object Storage Service,简称 OSS)。

OSS的接入方式选择

WEB端直传

很多人采用的做法是用户在浏览器/APP上传到应用服务器,然后应用服务器再把文件上传到OSS。

practice_post_callback_1

该方法有如下缺点:

  • 上传慢

    • 先上传到应用服务器,再上传到OSS,网络传送多了一倍。
    • 如果数据直传到OSS,不走应用服务器,速度将大大提升,而且OSS是采用BGP带宽,能保证各地各运营商的速度。
  • 扩展性不好

    • 如果后续用户多了,应用服务器会成为瓶颈。
  • 费用高

    • 由于OSS上传流量是免费的。如果数据直传到OSS,不走应用服务器,那么将能省下几台应用服务器。

服务端签名后直传

practice_post_callback_5

相比上面这种WEB端直传方式,服务端签名直传的方式能够更好的解决相关痛点,符合业务需求。

使用UXCore-Uploader直传

UXCore-Uploader特性

  • md5(用于秒传)
  • 分片上传
  • html5-runtime,flash-runtime
  • 多种收集器

    • DndCollector
    • PasteCollector
    • PickerCollector
  • 拥抱es6

获取后端服务器签名

第一步,就是获取签名,这里封装成了一个方法。

getPolicy() {
  fetch('后端签名认证信息URL').then(res => {
    this.url = res.host;
    this.params = {
      signature: res.signature,
      expire: res.expire,
      OSSAccessKeyId: res.accessKeyId,
      policy: res.policy,
      dir: res.pictureDir,
      success_action_status: '200',
      'content-disposition': 'attachement'
    };
  });
}

OSS的签名参数,请参考服务端签名PostObject

UXCore-Uploader配置

因为项目中要求是视频和图片,所以需要对Uploader进行accept属性的配置,不然会导致上传失败,并把之前getPolicy中获取的数据进行传入。

<Uploader
 accept="avi,asf,wmv,mpeg,mpg,vob,mkv,mov,rmvb,mp4,bmp,jpg,gif,jpeg,png"
  // 其他项省略...
  url={this.url}
  params={this.params}
>

感觉一切OK,应该可以用了,但是问题出现了。

遇到问题

由于UXCore-Uploader配合fileList参数,需要对Response的数据有一个要求格式:

{
    name: '', // 文件名称,列表形式必填
    ext: '', // 文件扩展名。例如 jpg。可选,不填时无法根据类型展示对应图标
    fileType: '', // 文件 mimetypes 类型。 例如 image/jpg。 可选,不填时无法根据类型展示对应图标
    response: {
      url: xxx,  // 文件链接,必填
      canRemove: true, // 是否可以删除,可选
      downloadUrl: 'xxxx', // 下载 URL,可选
    },
  }

而OSS返回的数据默认并没有response字段,所以报错了。

pro1

pro2

解决方案

查看了UXCore-Uploader的源码,发现是基于UploadCore库做的封装,其中有一个钩子onfileuploadcompleting,可以实现对response字段的定制。

onfileuploadcompleting(FileResponse) {
  FileResponse.setResponse({
    content: {
      url: '',
      downloadUrl: '',
    },
    success: true,
  });
}

UploadCore详细说明请参考UploadCore

UploadCore中提供了onfileuploadpreparing,getPolicy可以放到这个地方执行。

onfileuploadpreparing: request => {
  fetch('后端签名认证信息URL').then(res => {
    request.setUrl(res.host);
    request.setParam('OSSAccessKeyId', res.accessKeyId);
    // 省略其他配置项...
   });
 }
}

上传完成后的相关信息,也需要在onfileuploadcompleted中去获取。

小结

本文简单描述了使用UXCore-Uploader进行OSS直传碰到的问题及解决办法。UXCore-Uploader的特性,可以成为一种更好的OSS直传选择。

Reference

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
5月前
|
对象存储
minio临时凭证直传切换到阿里云oss
minio临时凭证直传切换到阿里云oss
481 1
|
5月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
对象存储
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
463 0
|
5月前
|
存储 数据管理 Java
基于OSS、NFS构建高性能可扩展的遥感智能解译系统实践之路
该文探讨了构建高性能、可扩展的遥感智能解译系统的架构演进过程。作者强调架构应根据业务场景而定,而非追求单一的“最佳”架构。文章分为五个部分,介绍了从初步的业务场景分析到逐步优化的架构设计。 1. 业务场景描述了服务于地理信息行业的遥感数据管理平台,包括数据湖和遥感智能解译系统的功能和架构设计。 2. 初代系统解决了数据管理和智能解译的基本需求,但存在数据同步效率低下的问题。 3. 自动化阶段通过消息推送和数据接收模块减少了人工干预,将处理时间减半,但仍存在效率和稳定性问题。 4. 高性能阶段引入数据订阅/推送和数据接收Agent,实现了稳定、高速的数据传输,性能提升了6倍。
48812 2
|
存储 运维 监控
OSS生命周期管理与访问行为分析实践
认证考试:OSS生命周期管理与访问行为分析实践
|
存储 前端开发 JavaScript
Nestjs+Vue实现阿里云OSS服务端签名直传
阿里云 OSS 是常用的对象存储服务,借助其提供的 SDK,客户端(浏览器,小程序等)可以非常方便的将文件上传到 OSS 进行管理。
893 0
Nestjs+Vue实现阿里云OSS服务端签名直传
|
前端开发 API 开发工具
阿里云oss开发实践:大文件分片、断点续传、实时进度 React+Node+Socket.IO
阿里云oss开发实践:大文件分片、断点续传、实时进度 React+Node+Socket.IO
1504 2
|
存储 域名解析 安全
Nest 实现OSS 服务端签名直传并设置上传回调
Nest 实现OSS 服务端签名直传并设置上传回调
564 0
|
SQL 存储 运维
使用CloudLens for OSS构建Bucket资产可观测性实践
本文介绍通过CloudLens for OSS计量日志的自定义查询分析,来构建不同Bucket之间资产趋势可观测性对比分析。
189 0
|
存储 SQL JSON
使用SLS统计分析三方CDN回源OSS月95带宽实践
本文介绍通过使用阿里云日志服务SLS,对存储在SLS中的三方CDN回源阿里云OSS的监控日志数据,进行自定义查询分析之后得到按照不同运营商、不同业务类型(CND)纬度下,回源OSS的带宽月95量级数据,用于业务统计分析。
462 0

相关产品

  • 对象存储