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啥的自己引用哈。。

1. <div id="up_wrap"></div>

2. <div class="form-group">

3. <input type="file" id="file" multiple="multiple" />

4. </div>

5. <div class="form-group">

6. <input type="button" class="btn btn-primary" id="file-button" value="Upload" />

7. <input type="button" class="btn btn-primary" id="Continue-button" value="Continue" />

8. </div>

1. <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.2.min.js"></script>

2. <script type="text/javascript">

3. var appServer = 'http://www.tele.bh/med/home/sts';//获取ststoken的接口，这边这个地址是我本地的。你们的接口地址自己应该清楚

4. var bucket = '你新建的bucket名字';

5. var region = 'oss-cn-hangzhou';//前面新建bucket时选择过的。

6. var uid = 'x';//用户标识。这个根据自己情况自己定

7. var Buffer = OSS.Buffer;

8. console.log(OSS);

9. //获取授权STSToken，并初始化client

10. var applyTokenDo = function (func) {

11. var url = appServer;

12. return $.get(url).then(function (result) {

13. var res = JSON.parse(result);

14. var creds = res.data.Credentials;

15. console.log(creds);

16. var client = new OSS({

17. region: region,

18. accessKeyId: creds.AccessKeyId,

19. accessKeySecret: creds.AccessKeySecret,

20. stsToken: creds.SecurityToken,

21. bucket: bucket

22. });

23. return func(client);

24. });

25. };

26.  

27. //上传文件

28. var uploadFile = function (client) {

29. if (upfiles.length < 1)

30. return;

31. upfile = upfiles[0];

32. var file = upfile.file;

33. //key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。

34. var key = upfile.name;

35. var objkey = key + "_" + uid + ".json";

36. return client.multipartUpload(key, file, {

37. progress: function (p, cpt, res) {

38. console.log("p:", p);

39. console.log("cpt:", cpt);

40. if (cpt != undefined) {

41. var content = JSON.stringify(cpt);

42. client.put(objkey, new Buffer(content));

43. }

44.  

45. console.log(Math.floor(p * 100) + '%');

46. var bar = document.getElementById('progress-bar_' + upfile.num);

47. bar.style.width = Math.floor(p * 100) + '%';

48. bar.innerHTML = Math.floor(p * 100) + '%';

49.  

50. }

51. }).then(function (res) {

52. console.log('upload success: ', res);

53. upfiles.shift();

54. client.delete(objkey);

55. applyTokenDo(uploadFile);

56. }).catch(function(err) {

57. console.log(err);

58. error(err);

59. });

60. };

61.  

62. //断点续传文件

63. var reUploadFile = function (client) {

64. if (upfiles.length < 1)

65. return;

66. upfile = upfiles[0];

67. var file = upfile.file;

68. //key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。

69. var key = upfile.name;

70. var objkey = key + "_" + uid + ".json";

71. return client.get(objkey).then(function (res) {

72. var data = JSON.parse(res.content);

73. data.file = file;

74. return client.multipartUpload(key, file, {

75. checkpoint: data,

76. progress: function (p, cpt, res) {

77. console.log("p:", p);

78. console.log("cpt:", cpt);

79. if (cpt != undefined) {

80. var content = JSON.stringify(cpt);

81. client.put(objkey, new Buffer(content));

82. }

83. var bar = document.getElementById('progress-bar_' + upfile.num);

84. bar.style.width = Math.floor(p * 100) + '%';

85. bar.innerHTML = Math.floor(p * 100) + '%';

86. }

87. }).then(function (ret) {

88. console.log('upload success:', ret);

89. upfiles.shift();

90. client.delete(objkey);

91. applyTokenDo(uploadFile);

92. }).catch(function(err) {

93. console.log(err);

94. error(err);

95. });

96. });

97. };

98.  

99. function error(err){

100. switch (err.status) {

101. case 0:

102. if (err.name == "cancel") { //手动点击暂停上传

103. return;

104. }

105. break;

106. case -1: //请求错误，自动重新上传

107. // 重新上传;

108. return;

109. case 203: //回调失败

110. // 前端自己给后台回调;

111. return;

112. case 400:

113. switch (err.code) {

114. case 'FilePartInterity': //文件Part已改变

115. case 'FilePartNotExist': //文件Part不存在

116. case 'FilePartState': //文件Part过时

117. case 'InvalidPart': //无效的Part

118. case 'InvalidPartOrder': //无效的part顺序

119. case 'InvalidArgument': //参数格式错误

120. // 清空断点;

121. // 重新上传;

122. return;

123. case 'InvalidBucketName': //无效的Bucket名字

124. case 'InvalidDigest': //无效的摘要

125. case 'InvalidEncryptionAlgorithmError': //指定的熵编码加密算法错误

126. case 'InvalidObjectName': //无效的Object名字

127. case 'InvalidPolicyDocument': //无效的Policy文档

128. case 'InvalidTargetBucketForLogging': //Logging操作中有无效的目标bucket

129. case 'MalformedXML': //XML格式非法

130. case 'RequestIsNotMultiPartContent': //Post请求content-type非法

131. // 重新授权;

132. // 继续上传;

133. return;

134. case 'RequestTimeout'://请求超时

135. // 重新上传;

136. return;

137. }

138. break;

139. case 403: //授权无效，重新授权

140. case 411: //缺少参数

141. case 404: //Bucket/Object/Multipart Upload ID 不存在

142. // 重新授权;

143. // 继续上传;

144. return;

145. case 500: //OSS内部发生错误

146. // 重新上传;

147. return;

148. default:

149. break;

150. }

151. }

152. //文件上传队列

153. var upfiles = [];

154.  

155. $(function () {

156. //初始化文件上传队列

157. $("#file").change(function (e) {

158. var ufiles = $(this).prop('files');

159. var htm = "";

160. for (var i = 0; i < ufiles.length; i++) {

161. 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>";

162. upfiles.push({

163. num: i,

164. name: ufiles[i].name,

165. file: ufiles[i]

166. })

167. }

168. console.log('upfiles:', upfiles);

169. $("#up_wrap").html(htm);

170. });

171. //上传

172. $("#file-button").click(function () {

173. applyTokenDo(uploadFile);

174. });

175. //续传

176. $("#Continue-button").click(function () {

177. applyTokenDo(reUploadFile);

178. })

179. })

180. </script>

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

 

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