vue上传视频并且截取视频图片

一，写好上传文件代码，使用的是el文件上传组件

<el-upload class="upload-demo" accept=".mp4,.jpg" :limit="1" :on-exceed="onExceed"
    :before-remove="beforeRemove" :before-upload="beforeUpload" :on-preview="onPreview" drag
    :on-progress="onProgress" action="https://jsonplaceholder.typicode.com/posts/" multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="upload-btn">上传视频</div>
    <div class="el-upload__tip" slot="tip">只能上传mp4文件，且不超过8GB</div>
</el-upload>

二，使用上传文件之前的钩子beforeUpload获取视频路径、dom和其他需要的信息，并且写入自己的校验方法

beforeUpload(file) {
    let thia = this
    var url = URL.createObjectURL(file);
    var audioElement = new Audio(url);
    var duration;
    audioElement.addEventListener("loadedmetadata",
        function () {
            duration = parseInt(audioElement.duration); //时长为秒，取整          
            // console.log(audioElement.currentSrc);
            thia.getPictures(url, duration, file.name)
        });
    const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
    const whiteList = ["mp4", "jpg"];
    if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error('上传文件只能是 mp4格式');
        return false;
    }
    const isLt2M = file.size / 1024 / 1024 / 1024 < 8;
    if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 8GB');
        return false;
    }
},

三，把视频使用画布画出来，获取到Base64字符串，可以直接使用

getPictures(url, time, name) {
            var canvas = document.createElement('canvas')
            var videoElement = document.createElement('video');
            var ctx = canvas.getContext('2d')
            videoElement.src = url;
            videoElement.play()
            videoElement.addEventListener('loadedmetadata', () => {
                let width = 930 // canvas的尺寸和图片一样
                let height = 523;
                canvas.width = width;
                canvas.height = height;
                videoElement.currentTime = 1
                setTimeout(() => {
                    ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
                    let imgDataUrl = canvas.toDataURL();
                    this.url = imgDataUrl
                    console.log('封面图Base64:', imgDataUrl)
                    // let fileObj = base64toFile(imgDataUrl, name, 'image/png')
                    // console.log(fileObj);
                }, 200)
            });
        },

1，videoElement.currentTime是让视频播放到多少秒，然后再截取，这里要延迟才能获取videoElement视频dom

2，Base64字符串转File是base64toFile函数，得到fileOb就，就可以给后端存储了

/**
 * Base64字符串转File文件
 * @param {String} base64 Base64字符串(字符串不包含Data URI scheme)
 * @param {String} filename 文件名称
 * @param {String} type 文件类型(例如：image/png)
 */
export function base64toFile(base64, filename, type) {
	var arr = base64.split(',')
	var mime = arr[0].match(/:(.*?);/)[1]
	var bstr = atob(arr[1])
	var n = bstr.length
	var u8arr = new Uint8Array(n)
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n)
	}
	return new File([u8arr], filename, {
		type: mime
	})
}

formData

                const formData = new FormData();
                formData.append('file', fileObj);