1、后台生成签名代码
com.qcloud
vod_api
2.1.1
public Result getSign() {
//得到Sign
Signature sign = new Signature();
sign.setSecretId(SecretId);
sign.setSecretKey(SecretKey);
sign.setCurrentTime(System.currentTimeMillis() / 1000);
sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
sign.setSignValidDuration(3600 * 24 * 2);
String signature = null;
try {
signature = sign.getUploadSignature();
logger.info("Find Doctor signature : " + signature);
} catch (Exception e) {
logger.info("FindDoctor获取签名失败");
e.printStackTrace();
}
return this.success(signature);
}
package com.zylc.cloud.framework.util;
import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import sun.misc.BASE64Encoder;
@SuppressWarnings("restriction")
public class Signature {
private String secretId;
private String secretKey;
private long currentTime;
private int random;
private int signValidDuration;
private static final String HMAC_ALGORITHM = "HmacSHA1";
private static final String CONTENT_CHARSET = "UTF-8";
public static byte[] byteMerger(byte[] byte1, byte[] byte2) {
byte[] byte3 = new byte[byte1.length + byte2.length];
System.arraycopy(byte1, 0, byte3, 0, byte1.length);
System.arraycopy(byte2, 0, byte3, byte1.length, byte2.length);
return byte3;
}
public String getUploadSignature() throws Exception {
String strSign = "";
String contextStr = "";
long endTime = (currentTime + signValidDuration);
contextStr += "secretId=" + java.net.URLEncoder.encode(secretId, "utf8");
contextStr += "¤tTimeStamp=" + currentTime;
contextStr += "&expireTime=" + endTime;
contextStr += "&random=" + random;
try {
Mac mac = Mac.getInstance(HMAC_ALGORITHM);
SecretKeySpec secretKey = new SecretKeySpec(this.secretKey.getBytes(CONTENT_CHARSET), mac.getAlgorithm());
mac.init(secretKey);
byte[] hash = mac.doFinal(contextStr.getBytes(CONTENT_CHARSET));
byte[] sigBuf = byteMerger(hash, contextStr.getBytes("utf8"));
strSign = new String(new BASE64Encoder().encode(sigBuf).getBytes());
strSign = strSign.replace(" ", "").replace("\n", "").replace("\r", "");
} catch (Exception e) {
throw e;
}
return strSign;
}
public void setSecretId(String secretId) {
this.secretId = secretId;
}
public void setSecretKey(String secretKey) {
this.secretKey = secretKey;
}
public void setCurrentTime(long currentTime) {
this.currentTime = currentTime;
}
public void setRandom(int random) {
this.random = random;
}
public void setSignValidDuration(int signValidDuration) {
this.signValidDuration = signValidDuration;
}
}
2、elment-ui代码 el-upload 标签使用"http-request"覆盖默认的上传行为
点击上传
只能上传AVI、WMV、RM、RMVB、MP4等格式 文件
3、引入SDK
先打开CMD命令行运行 npm install vod-js-sdk-v6
然后页面引入
import TcVod from 'vod-js-sdk-v6'
uploadVideo (event){
//获取file文件 ,在后面上传时使用
this.mediaFile = event.file
this.attachVideo.size = event.file.size
}
4、定义获取上传签名的函数
function getSignature() {
return axios.post(url).then(function (response) {
return response.data.signature;
})
};
5、页面JS代码
const tcVod = new TcVod({
getSignature: getSignaturef,
})
const uploader = tcVod.upload({
mediaFile: this.mediaFile,
coverFile: this.coverFile,
})
// 视频上传完成时
uploader.on('media_upload', function(info) {
console.log('视频上传完成')
uploaderInfo.isVideoUploadSuccess = true;
if(uploaderInfo.isCoverUploadSuccess){
_this.buttonName = '处理中'
}
})
// 视频上传进度
uploader.on('media_progress', function(info) {
_this.percentageVideo = (info.percent*100).toFixed(0)
console.log('视频上传中',_this.percentageVideo)
uploaderInfo.progress = info.percent;
})
// 封面上传完成时
uploader.on('cover_upload', function(info) {
console.log('封面上传完成')
uploaderInfo.isCoverUploadSuccess = true;
if(uploaderInfo.isVideoUploadSuccess){
_this.buttonName = '处理中'
}
})
// 封面上传进度
uploader.on('cover_progress', function(info) {
_this.percentageImage = (info.percent*100).toFixed(0)
console.log('封面上传中',_this.percentageImage)
uploaderInfo.coverProgress = info.percent;
})
var uploaderInfo = {
videoInfo: uploader.videoInfo,
coverInfo: uploader.coverInfo,
isVideoUploadSuccess: false,
isVideoUploadCancel: false,
isCoverUploadSuccess: false,
progress: 0,
coverProgress: 0,
fileId: "",
videoUrl: "",
coverUrl: "",
cancel: function() {
uploaderInfo.isVideoUploadCancel = true;
uploader.cancel();
}
}
this.uploaderInfo = uploaderInfo
uploader.done().then(function (doneResult) {
uploaderInfo.fileId = doneResult.fileId;
var vurl = doneResult.video.url
var vurls = vurl.split('/')
var _vurls = vurl.split('.')
_this.attachVideo.filename = vurls[vurls.length-1]
_this.attachVideo.filepath = doneResult.video.url
_this.attachVideo.mime = _vurls[_vurls.length-1]
if(doneResult.cover){
_this.attachVideo.thumbnail = doneResult.cover.url
}
console.log(_this.attachVideo)
insertVideo(_this.attachVideo).then(e=>{
if(e.data){
_this.attachVideo={
targetId : '',
type : 2,
name : '',
filename : '',
filepath : '',
mime : '',
size : 0,
thumbnail : '',
ownerId : '',
secured : 0,
scope : 1,
locked : 0,
deleted : 0
}
_this.fileList3 = []
_this.fileList4 = []
_this.loadingUpload = false
_this.progress = false
_this.percentageVideo = 0
_this.percentageImage = 0
_this.buttonName = '确定上传'
_this.uploaderInfo = {}
_this.attachVideo.targetId = ''
_this.state4 = ''
_this.$emit('currentValue',false)
}
})
})