OSS直传与UXCore-Uploader实践

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 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,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
23天前
|
对象存储
minio临时凭证直传切换到阿里云oss
minio临时凭证直传切换到阿里云oss
46 1
|
5月前
|
存储 域名解析 安全
Nest 实现OSS 服务端签名直传并设置上传回调
Nest 实现OSS 服务端签名直传并设置上传回调
280 0
|
4月前
|
存储 运维 监控
OSS生命周期管理与访问行为分析实践
认证考试:OSS生命周期管理与访问行为分析实践
|
5月前
|
对象存储
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
178 0
|
5月前
|
存储 前端开发 JavaScript
Nestjs+Vue实现阿里云OSS服务端签名直传
阿里云 OSS 是常用的对象存储服务,借助其提供的 SDK,客户端(浏览器,小程序等)可以非常方便的将文件上传到 OSS 进行管理。
511 0
Nestjs+Vue实现阿里云OSS服务端签名直传
|
6月前
|
前端开发 API 开发工具
阿里云oss开发实践:大文件分片、断点续传、实时进度 React+Node+Socket.IO
阿里云oss开发实践:大文件分片、断点续传、实时进度 React+Node+Socket.IO
500 1
|
7月前
|
SQL 存储 运维
使用CloudLens for OSS构建Bucket资产可观测性实践
本文介绍通过CloudLens for OSS计量日志的自定义查询分析,来构建不同Bucket之间资产趋势可观测性对比分析。
134 0
|
7月前
|
存储 SQL JSON
使用SLS统计分析三方CDN回源OSS月95带宽实践
本文介绍通过使用阿里云日志服务SLS,对存储在SLS中的三方CDN回源阿里云OSS的监控日志数据,进行自定义查询分析之后得到按照不同运营商、不同业务类型(CND)纬度下,回源OSS的带宽月95量级数据,用于业务统计分析。
308 0
|
7月前
|
存储 前端开发 安全
oss服务端签名后直传分析与代码实现
oss服务端签名后直传分析与代码实现
592 0
|
10月前
|
小程序 JavaScript 前端开发
微信小程序:阿里云OSS直传实践-PHP实现服务端签名
微信小程序:阿里云OSS直传实践-PHP实现服务端签名
527 0
微信小程序:阿里云OSS直传实践-PHP实现服务端签名

相关产品

  • 对象存储