<el-upload
:action="pathUrl+'/api/FileUpload/SaveFiles'"
:limit="5"
list-type="picture-card"
:file-list="sfzzm"
:on-preview="handlePictureCardPreview"
:on-success="handleDownload"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:before-upload="beforeAvatarUpload"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
handleDownload(response, file, fileList) {
if (file.status) {
var index = file.name.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
var tv_id = file.name.substring(index); //截断"."之前的，得到后缀
this.videoUrl = file.url;
//如果是视频截取第一个作为图片展示出来
if (tv_id == ".mp4") {
//根据后缀，判断是否符合视频格式
this.findvideocover(this.pathUrl+response.Data[0],file);
}
this.sfzzm.push(file);
this.ListFileUrlDetail.Url = response.Data[0];
this.ListFileUrlDetail.Size = file.size;
this.ListFileUrlDetail.uid = file.uid;
this.form.FileUrls.push( Object.assign({}, this.ListFileUrlDetail) );
}
console.log("sfzzm" + JSON.stringify(this.sfzzm));
},
///超出数量限制
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 5 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
);
},
//截取视频第一帧作为播放前默认图片 findvideocover(url,file) { const video = document.getElementById("upvideo"); // 获取视频对象 // const video = document.createElement("video") // 也可以自己创建video video.src=url // url地址 url跟 视频流是一样的 var canvas = document.getElementById('mycanvas') // 获取 canvas 对象 const ctx = canvas.getContext('2d'); // 绘制2d video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频 video.currentTime = 1 // 第一帧 video.oncanplay = () => { canvas.width = video.clientWidth; // 获取视频宽度 canvas.height = video.clientHeight; //获取视频高度 // 利用canvas对象方法绘图 ctx.drawImage(video, 0, 0, video.clientWidth,video.clientHeight) // 转换成base64形式 this.imgsrc = canvas.toDataURL ("image/png") // 截取后的视频封面 file.url=this.imgsrc; } },
