调用七牛云上传接口后返回的视频链接后直接拼上 ?vframe/jpg/offset/0,就可以直接显示第一帧。
代码示例(我的项目用的是vue-cli):
// 七牛云文件上传
qiniuUpload(fileList) {
let self = this;
let targetlist = "";
self.isWaiting = true;
let file = event.target.files[0];
let type = file.name.split(".");
// if(file.size > 1024*1024*4)
// {
// Toast('上传头像图片大小不能超过 4MB!')
// return false
// }
let reader = new FileReader();
reader.readAsDataURL(file);
event.target.value = "";
reader.onload = function(e) {
console.log(targetlist.length);
};
// 上传qiniu
const promise = new this.request().fetch(
this.apis.getApiByKey("GET_QINIU_TOKEN")
);
promise.then(res => {
let token = res.data.uptoken;
let config = {
useCdnDomain: true,
disableStatisticsReport: false,
retryCount: 5,
region: qiniu.region.z0
};
let putExtra = {
fname: "",
params: {}
};
let key = new Date().toLocaleString().replace(/\/|[\u4e00-\u9fa5]|:|\s+/g, "") + "_" + self.MathRand() + "." + type[type.length - 1];
let domain = "dkscimages.pxmsw.cn";
var observer = {
next(res) {
if (res.total.percent == 100) {
// 上传进度为 100%
self.isWaiting = false;
}
},
error(err) {
// console.log(err)
},
complete(res) {
let resultUrl = "https://" + domain + "/" + res.key;
targetlist.push(resultUrl);
// 获取视频第一帧的地址
// resultUrl是视频的地址 ,拼接上 ?vframe/jpg/offset/1 就是视频第一帧的图片的地址
self.videoFirstFrame_url = resultUrl + "?vframe/jpg/offset/0";
self.selectVideo_url = resultUrl;
}
};
let observable = qiniu.upload(file, key, token, putExtra, config);
var subscription = observable.subscribe(observer);
setTimeout(function() {
if(self.isWaiting){
// 取消上传
subscription.unsubscribe();
self.isWaiting = false;
Toast("上传超时,请重新上传!");
}
},30000);
});
},
MathRand() {
var Num = "";
for (var i = 0; i < 5; i++) {
Num += Math.floor(Math.random() * 10);
}
return Num;
},









网友评论