OSS直传与UXCore-Uploader实践-阿里云开发者社区

开发者社区> 阿里云存储服务> 正文
登录阅读全文

OSS直传与UXCore-Uploader实践

简介: 本文是我们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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

阿里云存储基于飞天盘古2.0分布式存储系统,产品多种多样,充分满足用户数据存储和迁移上云需求。

官方博客
最新文章
相关文章
存储产品
客户案例