本文是我们OSS的用户自己写的一篇文章，笔者做了简单的修改。这里代发。感谢这位用户对OSS的了解如此深！
背景
视联网业务中，需要存储大量的图片、视频等素材资源，为应对这种大数据文件的存储，就接入了阿里云对象存储服务（Object Storage Service，简称 OSS）。
OSS的接入方式选择
WEB端直传
很多人采用的做法是用户在浏览器/APP上传到应用服务器，然后应用服务器再把文件上传到OSS。
该方法有如下缺点：
-
上传慢
- 先上传到应用服务器，再上传到OSS，网络传送多了一倍。
- 如果数据直传到OSS，不走应用服务器，速度将大大提升，而且OSS是采用BGP带宽，能保证各地各运营商的速度。
-
扩展性不好
- 如果后续用户多了，应用服务器会成为瓶颈。
-
费用高
- 由于OSS上传流量是免费的。如果数据直传到OSS，不走应用服务器，那么将能省下几台应用服务器。
服务端签名后直传
相比上面这种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字段，所以报错了。
解决方案
查看了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直传选择。
