oss分片上传 – 源码巴士

由于项目需求，需要给客户上传大文件到oss的权限，话不多说，百度上找了很多代码都是有问题的。。自己搞了好几个小时

1、需要先登录阿里云创建阿里云RAM子账号

创建成功后保存好accesskey 和accesskeySecret,一会后面要用到

2、给用户添加授权，让用户可以调用角色接口

3、建一个自定义规则RAMtest给RAM角色

再给这个RAM角色添加这个自定义授权RAMtest,授权完如下图

RAM设置到此结束。。接下来就是要创建bucket了

4、bucket创建

这里面的名称和endpoint后面会用到

编辑跨域规则

5、服务端sts seritytoken的获取

这个我用阿里的sdk获取的过程不顺利，官方很简单的一个示例。。啥都没说。。我按官方的示例代码获取是报错的，搞了半天才不报错。。结果返回的还是个空的json..然后我就找了第三方封装的包http://packagist.p2hp.com/packages/shaozeming/aliyun-sts,执行下面命令安装

composer require shaozeming/aliyun-sts

下面是我的服务端代码

接下来就是html页面代码了，样式用的bootstrap，css啥的自己引用哈。。

<div id="up_wrap"></div>
<div class="form-group">
<input type="file" id="file" multiple="multiple" />
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" id="file-button" value="Upload" />
<input type="button" class="btn btn-primary" id="Continue-button" value="Continue" />
</div>

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.2.min.js"></script>
<script type="text/javascript">
var appServer = 'http://www.tele.bh/med/home/sts';//获取ststoken的接口，这边这个地址是我本地的。你们的接口地址自己应该清楚
var bucket = '你新建的bucket名字';
var region = 'oss-cn-hangzhou';//前面新建bucket时选择过的。
var uid = 'x';//用户标识。这个根据自己情况自己定
var Buffer = OSS.Buffer;
console.log(OSS);
//获取授权STSToken，并初始化client
var applyTokenDo = function (func) {
var url = appServer;
return $.get(url).then(function (result) {
var res = JSON.parse(result);
var creds = res.data.Credentials;
console.log(creds);
var client = new OSS({
region: region,
accessKeyId: creds.AccessKeyId,
accessKeySecret: creds.AccessKeySecret,
stsToken: creds.SecurityToken,
bucket: bucket
});
return func(client);
});
};
//上传文件
var uploadFile = function (client) {
if (upfiles.length < 1)
return;
upfile = upfiles[0];
var file = upfile.file;
//key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
var key = upfile.name;
var objkey = key + "_" + uid + ".json";
return client.multipartUpload(key, file, {
progress: function (p, cpt, res) {
console.log("p:", p);
console.log("cpt:", cpt);
if (cpt != undefined) {
var content = JSON.stringify(cpt);
client.put(objkey, new Buffer(content));
}
console.log(Math.floor(p * 100) + '%');
var bar = document.getElementById('progress-bar_' + upfile.num);
bar.style.width = Math.floor(p * 100) + '%';
bar.innerHTML = Math.floor(p * 100) + '%';
}
}).then(function (res) {
console.log('upload success: ', res);
upfiles.shift();
client.delete(objkey);
applyTokenDo(uploadFile);
}).catch(function(err) {
console.log(err);
error(err);
});
};
//断点续传文件
var reUploadFile = function (client) {
if (upfiles.length < 1)
return;
upfile = upfiles[0];
var file = upfile.file;
//key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
var key = upfile.name;
var objkey = key + "_" + uid + ".json";
return client.get(objkey).then(function (res) {
var data = JSON.parse(res.content);
data.file = file;
return client.multipartUpload(key, file, {
checkpoint: data,
progress: function (p, cpt, res) {
console.log("p:", p);
console.log("cpt:", cpt);
if (cpt != undefined) {
var content = JSON.stringify(cpt);
client.put(objkey, new Buffer(content));
}
var bar = document.getElementById('progress-bar_' + upfile.num);
bar.style.width = Math.floor(p * 100) + '%';
bar.innerHTML = Math.floor(p * 100) + '%';
}
}).then(function (ret) {
console.log('upload success:', ret);
upfiles.shift();
client.delete(objkey);
applyTokenDo(uploadFile);
}).catch(function(err) {
console.log(err);
error(err);
});
});
};
function error(err){
switch (err.status) {
case 0:
if (err.name == "cancel") { //手动点击暂停上传
return;
}
break;
case -1: //请求错误，自动重新上传
// 重新上传;
return;
case 203: //回调失败
// 前端自己给后台回调;
return;
case 400:
switch (err.code) {
case 'FilePartInterity': //文件Part已改变
case 'FilePartNotExist': //文件Part不存在
case 'FilePartState': //文件Part过时
case 'InvalidPart': //无效的Part
case 'InvalidPartOrder': //无效的part顺序
case 'InvalidArgument': //参数格式错误
// 清空断点;
// 重新上传;
return;
case 'InvalidBucketName': //无效的Bucket名字
case 'InvalidDigest': //无效的摘要
case 'InvalidEncryptionAlgorithmError': //指定的熵编码加密算法错误
case 'InvalidObjectName': //无效的Object名字
case 'InvalidPolicyDocument': //无效的Policy文档
case 'InvalidTargetBucketForLogging': //Logging操作中有无效的目标bucket
case 'MalformedXML': //XML格式非法
case 'RequestIsNotMultiPartContent': //Post请求content-type非法
// 重新授权;
// 继续上传;
return;
case 'RequestTimeout'://请求超时
// 重新上传;
return;
}
break;
case 403: //授权无效，重新授权
case 411: //缺少参数
case 404: //Bucket/Object/Multipart Upload ID 不存在
// 重新授权;
// 继续上传;
return;
case 500: //OSS内部发生错误
// 重新上传;
return;
default:
break;
}
}
//文件上传队列
var upfiles = [];
$(function () {
//初始化文件上传队列
$("#file").change(function (e) {
var ufiles = $(this).prop('files');
var htm = "";
for (var i = 0; i < ufiles.length; i++) {
htm += "<dl><dt>" + ufiles[i].name + "</dt><dd><div class=\"progress\"><div id=\"progress-bar_" + i + "\" class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"min-width: 2em;\">0%</div></div></dd></dl>";
upfiles.push({
num: i,
name: ufiles[i].name,
file: ufiles[i]
})
}
console.log('upfiles:', upfiles);
$("#up_wrap").html(htm);
});
//上传
$("#file-button").click(function () {
applyTokenDo(uploadFile);
});
//续传
$("#Continue-button").click(function () {
applyTokenDo(reUploadFile);
})
})
</script>

最后的界面如下所示，根据自己的需求去调样式吧。。

demo地址：https://github.com/ali-sdk/ali-oss

原文链接：https://blog.csdn.net/qq_22560431/article/details/107974791