上传视频到阿里云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;}