vue+element+sts临时授权上传大文件到阿里云OSS时踩过的坑。

参考原文地址：参考原文地址
阿里云js分片上传官方文档：阿里云js分片上传官方文档
STS临时授权访问OSS：STS临时授权访问OSS
STS接入地址：STS接入地址
报错Error: Please set the etag of expose-headers in OSS解决：报错Error: Please set the etag of expose-headers in OSS
"npm ERR! Error: EPERM: operation not permitted"问题解决："npm ERR! Error: EPERM: operation not permitted"问题解决

因为公司需求，需要上传七八百兆的视频文件，原先是前端上传到后端，然后通过后端接口上传到阿里云的，但是已不满足现在需求。
就想直接通过前端js上传到阿里云，然后用分片上传的方法。

大体步骤：

1. 阿里云添加RAM用户和相对应的角色，详见参考原文地址
2. 后端java通过接口去获取sts凭证，并返回给前端
3. 前端获取文件，通过阿里云sdk方法直接上传。

想想还是简单的，不注意的坑倒是掉了一次又一次。

1.需要通过sts临时授权访问
2.安装阿里云oss 的SDK要用cnpm install ali-oss,并且提示没权限
3.实例化oss客户端对象的时候，通过接口获取sts，但是无法实例化oss对象
4.页面引入弹框组件，弹框又引入上传组件，无法在父页面清空上传组件的内容（父清空子的子）
5.region没复制全！！！！！！！！！！！！！！！！！！
6.etag没设置
7.分片上传返回的地址需要自己拼接，而不是直接一个地址

坑①

首先当然是参考官方文档了，但是却报以下警告(图中地址是：https://help.aliyun.com/document_detail/32077.html)。

然后当然是百度了，毕竟咱是基于百度开发的java程序员。
文章开头有STS临时授权访问OSS文档，通过java获取sts临时凭证，返回给前端，下面有java代码。

坑坑②

装个SDK都那么费劲，我很想哭的，开头有相关博客解决方法，"npm ERR! Error: EPERM: operation not permitted"问题解决。
我么，以管理员方式运行cmd，切换到项目目录，然后执行cnpm install ali-oss就可以了。

坑坑坑③

因为根据文首写的那个参考原文地址，是点击上传的时候再去获取STS Token，因为他用了异步async和await，反正我这是不行，创建OSSClient一直失败，因为没有获取到sts临时凭证，我这个半吊子到现在也没明白为什么异步和等待没起作用。
所以，我的方法是，点击上传的时候去获取sts临时授权，返回给前端，如果返回成功，再去创建OSSClient，如果创建成功，再去获取文件。详见下面indexBig.vue中的upload()方法。

坑坑坑坑④

这个上传的使用场景是这样的，页面有个新增按钮，新增弹框里面有上传方法。
页面是父页面，新增弹框是子页面，上传组件又是弹框中引入的，算是子页面的子组件。
因为上传成功会有提示，并且选择完文件会有文件名字，这些都需要在点开弹框的时候去清空。
详见tnews.vue中的addOrUpdateHandle()方法和tnews-add-or-update.vue的clearChildInfo()方法。
clearChildInfo()中有个延时调用上传组件的clearInfo()方法，因为打开弹框组件的时候，其中的上传子组件并没有同时导入，而是有个先后顺序，虽然只差了几毫秒。

坑坑坑坑坑⑤

这个错真的是最最最最最坑的，之前后端有上传阿里云相关，然后也有相关配置文件，我么直接复制了regionId后面的值，万万没想到啊，缺了个oss-，真的是死活上传不了。
凡是有配置值参数的接口，一定要检查好参数值对不对，我真的是一个字母一个字母对的，才发现地址栏少了oss-。

坑坑坑坑坑坑⑥

文首有报错Error: Please set the etag of expose-headers in OSS解决文档。

坑坑坑坑坑坑坑⑦

下图是返回结果的打印，分为普通上传和分片上传。分片上传需要自己拼接文件地址。

========================我是分割线，我想静静 ========================

以下是完整实例，用于上传上G的视频文件，回显也是用的video，本例设置60兆以上才调用分片上传，并且会有上传进度条，可根据需求修改。
有todo的地方都要根据实际情况改，本人前几天刚搞完（本人java，几年没搞前端的我差点被vue搞死了）。

获取sts临时凭证的方法：

	@RequestMapping(value = "/getStsKey",method = RequestMethod.POST)
	public R list(){
   
   
	   String endpoint = "sts.cn-hangzhou.aliyuncs.com";//STS接入地址//todo
	   String AccessKeyId = "********************";//有上传文件权限的key//todo
	   String accessKeySecret = "********************";//有上传文件权限的Secret//todo
	   String roleArn = "acs:ram::*****************:role/ramoss";//todo
	   String roleSessionName = "stsUploadRoleSession";//自定义
	   /*String policy = "{\n" +
	           "    \"Version\": \"1\", \n" +
	           "    \"Statement\": [\n" +
	           "        {\n" +
	           "            \"Action\": [\n" +
	           "                \"oss:*\"\n" +
	           "            ], \n" +
	           "            \"Resource\": [\n" +
	           "                \"acs:oss:*:*:*\" \n" +
	           "            ], \n" +
	           "            \"Effect\": \"Allow\"\n" +
	           "        }\n" +
	           "    ]\n" +
	           "}";*/
	   StsSecurityTokenEntity stsSecurityTokenEntity=new StsSecurityTokenEntity();
	   try {
   
   
	       // 添加endpoint（直接使用STS endpoint，前两个参数留空，无需添加region ID）
	       DefaultProfile.addEndpoint("", "", "Sts", endpoint);
	       // 构造default profile（参数留空，无需添加region ID）
	       IClientProfile profile = DefaultProfile.getProfile("", AccessKeyId, accessKeySecret);
	       // 用profile构造client
	       DefaultAcsClient client = new DefaultAcsClient(profile);
	       final AssumeRoleRequest request = new AssumeRoleRequest();
	       request.setMethod(MethodType.POST);
	       request.setRoleArn(roleArn);
	       request.setRoleSessionName(roleSessionName);
	       request.setPolicy(null); // 若policy为空，则用户将获得该角色下所有权限
	       request.setDurationSeconds(60*30L); // 设置凭证有效时间，我设置了30分钟，单位是秒
	       final AssumeRoleResponse response = client.getAcsResponse(request);
	       System.out.println("Expiration: " + response.getCredentials().getExpiration());
	       stsSecurityTokenEntity.setExpiration(response.getCredentials().getExpiration());
	       System.out.println("Access Key Id: " + response.getCredentials().getAccessKeyId());
	       stsSecurityTokenEntity.setAccessKeyId(response.getCredentials().getAccessKeyId());
	       System.out.println("Access Key Secret: " + response.getCredentials().getAccessKeySecret());
	       stsSecurityTokenEntity.setAccessKeySecret(response.getCredentials().getAccessKeySecret());
	       System.out.println("Security Token: " + response.getCredentials().getSecurityToken());
	       stsSecurityTok