<el-form-item
label="视频"
prop="videoUrl"
:rules="[{ required: true, message: '请上传视频' }]"
>
<div id="div1"></div>
<el-progress
class="mt20px"
v-show="progress > 0 && progress < 100"
:text-inside="true"
:stroke-width="14"
:percentage="progress"
status="success"
></el-progress>
<input
id="browse"
style="width: 72px; height: 30px; line-height: 30px; font-size: 14px"
:disabled="progress > 0 && progress < 100"
type="file"
@change="previewFiles"
/>
<canvas
id="myCanvas"
width="320"
height="200"
style="display: none"
></canvas>
<el-button
v-if="!isVideoShow"
style="margin-left: 50px"
type="primary"
size="small"
@click="saveImage('videodiv', 'cover')"
>截取为封面图</el-button
>
</el-form-item>
//借用七牛上传将input标签上传的二进制链接转换成类似“http://studioyszimg.yxj.org.cn/1692538307796.png”的简单链接。
//引入七牛文件
import Uploader from '@/server/qiniu/index';
previewFiles(e) {
let self = this
console.log('e', e);
const file = document.getElementById('browse').files[0];
console.log('files', file);
new Uploader({
file: file,
fileName: file.name,
quality: self.options.quality || 0.9,
onError(err) {
//上传出错的回调
console.log(err);
},
onProgress(res) {
//上传进行中的回调(在这里可以写一个进度条,当进度条为100时,则代表上传成功)
const percent = res.total.percent;
self.progress = parseInt(percent, 10);
if (self.progress == 100) {
self.isVideoShow = false
// self.firstImg = true
const fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = function (e) {
let video = document.createElement('video')
video.src = e.target.result
video.controls = true
video.setAttribute('id', 'videodiv')
if (document.getElementById('div1').getElementsByTagName('video').length !== 0) {
let res = document.getElementById('videodiv')
document.getElementById('div1').removeChild(res)
}
document.getElementById('div1').appendChild(video)
document.getElementById('videodiv').addEventListener("loadedmetadata", () => {
console.log(document.getElementById('videodiv').duration, 'pppp');
if (document.getElementById('videodiv').offsetWidth > document.getElementById('videodiv').offsetHeight) {
console.log('hahahhahahahhahahah');
self.screenType = false
} else {
console.log('kkkkkkkkk');
self.screenType = true
}
self.$set(self.form, 'duration', document.getElementById('videodiv').duration)
self.$set(self.form, 'multipleCoverImgUrl', [])
});
}
}
},
onSuccess(res) {
//上传成功的回调
console.log(res, 'hahha');
self.$set(self.form, 'videoUrl', res.url)
self.$set(self.form, 'videoName', file.name)
self.$set(self.form, 'fileSize', file.size)
}
});
},
import html2canvas from 'html2canvas'
//截取为封面图(这里用到了画布需要先引入)
saveImage(val, type) {
let myBox = document.getElementById(val)
html2canvas(myBox, {
useCORS: true,
allowTaint: true,
scrollX: 0,
scrollY: 0,
backgroundColor: "transparent",
}).then((canvas) => {
const dataUrl = canvas.toDataURL('image/jpeg');//图片转为下载路径
if (type == 'cover') {
this.upImage(dataUrl)
}
});
},