上传视频到阿里云OSS并获取视频时长

使用阿里云sdk，前端页面直传视频文件阿里云OSS存储，文件不需要经过服务端。

技术栈

前端：html、js、layui

服务端：Springboot

1、html页面创建元素

<input type="hidden" name="videoUrl" id="videoUrl" value=""> <input type="hidden" name="duration" id="duration" value=""> <video type="hidden" name="videoAttr" id="videoAttr"></video>

2、获取OSS的Token方法

（1）前端：ajax方式请求服务端获取阿里云OSS的token

    async function getSysToken() {         return new Promise((resolve, reject) => {             $.ajax({                 type: 'get',                 url: '/api/upload/stsToken',                 data: {id: userId},                 contentType: 'application/json',                 success: function (res) {                     if (res.code == 0) {                         let stsToken = {                             region: res.data.region,                             accessKeyId: res.data.accessKeyId,                             accessKeySecret: res.data.accessKeySecret,                             bucket: res.data.bucket,                             stsToken: res.data.securityToken                         };                         let client = new OSS(stsToken);                         resolve({client: client})                     } else {                         layer.msg('stsToken获取失败')                     }                 }             });         })     }

（2）服务端：通过自建配置文件类OSSProperties，获取yaml中阿里云OSS配置

@Resource private OSSProperties OSS;  @RequestMapping("stsToken") public Result stsToken(User user) { 		// 自定义角色会话名称，用来区分不同的令牌，例如可填写为SessionTest。 		String roleSessionName = "RamOssTest" + (Objects.nonNull(user.getId()) ? user.getId() : new Random().nextInt(10000)); 		String policy = "{\n" + 				"    \"Version\": \"1\",\n" + 				"    \"Statement\": [\n" + 				"        {\n" + 				"            \"Effect\": \"Allow\",\n" + 				"            \"Action\": \"oss:*\",\n" + 				"            \"Resource\": [\n" + 				"                \"acs:oss:*:*:" + OSS.getBucketName() + "/" + OSS.getFile() + "\"\n" + 				"            ]\n" + 				"        }\n" + 				"    ]\n" + 				"}"; 		try { 			String regionId = OSS.getEndPoint().split("\\.")[0].split("oss-")[1]; 			// 添加endpoint。 			DefaultProfile.addEndpoint(regionId, OSS.getBucketName(), OSS.getEndPoint()); 			// 构造default profile。 			IClientProfile profile = DefaultProfile.getProfile(regionId, OSS.getAccessKeyId(), OSS.getAccessKeySecret()); 			// 构造client。 			DefaultAcsClient client = new DefaultAcsClient(profile); 			final AssumeRoleRequest request = new AssumeRoleRequest(); 			request.setSysMethod(MethodType.POST); 			request.setRoleArn(OSS.getArn()); 			request.setRoleSessionName(roleSessionName); 			request.setPolicy(null); 			request.setDurationSeconds(OSS.getTimeout()); 			final AssumeRoleResponse response = client.getAcsResponse(request); 			STSToken stsToken = new STSToken(response.getCredentials().getExpiration(), response.getCredentials().getAccessKeyId(), response.getCredentials().getAccessKeySecret(), response.getCredentials().getSecurityToken(), "oss-" + regionId, OSS.getBucketName(), new Date().getTime() + OSS.getTimeout() * 1000); 			return Result.ok().data(stsToken); 		} catch (ClientException e) { 			System.out.println("Failed："); 			System.out.println("Error code: " + e.getErrCode()); 			System.out.println("Error message: " + e.getErrMsg()); 			System.out.println("RequestId: " + e.getRequestId()); 			return Result.error(e.getMessage()); 		} 	}

3、前端上传按钮，绑定点击方法为以下操作。点击

注意，重点是添加监听！！

let client = (await getSysToken()).client;                 client.multipartUpload(fileName, file, {                     progress: function(p, checkpoint) {                     // 上传进度条                         element.progress('progressBar', (p * 100).toFixed(2) + '%');                         if (p == 1) {                             $("input[name='file']").val('');                         }                     }                 }).then(function(res) {                     let vUrl = res.res.requestUrls[0].split("?")[0];                     $("#videoUrl").val(vUrl);                     // 获取<video>元素                     var videoElement = document.getElementById('videoAttr');                     videoElement.src = vUrl;                     // 重点是添加监听loadedmetadata事件                     videoElement.addEventListener('loadedmetadata', function() {                         console.log('视频总时长: ' + videoElement.duration);                         var vtime = videoElement.duration;                         var ddd = document.getElementById('duration');                         ddd.value = vtime;                     });                     layer.alert("上传完成");                  }).catch(function(err) {                     console.log(err);                 });

4、前端，获取时长的js方法

上传视频文件后，就可以调用获取时长方法，返回的时间格式：mm:SS，例如23:10，23分10秒

function getDuration(){         var time = document.getElementById("duration").value;         //如果不是数字则返回原值         var isNumeric = !isNaN(parseFloat(time)) && isFinite(time);         if(!isNumeric){             return time;         }         var totalSecond = Math.floor(time);         var minute = "00";         // 得到分钟数加秒数         if (totalSecond > 60){             minute = Math.floor(totalSecond / 60) ;             if (minute < 10) {                 minute = "0" + minute;             }         }         var sec = totalSecond%60;         if(sec < 10){             sec = "0"+sec;         }         var finalDuration = minute + ":"+sec;         return finalDuration;     }