播放视频：input file选择文件，video播放视频

<video id="videoPlayer" controls="controls" style="width:100%;max-height:400px;"></video>

用户选择了本地视频文件后，设置video的src属性

var video = this.$refs.fileInput.files[0];
var url = URL.createObjectURL(video);
console.log(url);
document.getElementById("videoPlayer").src=url;

vue的script中

creatImg:function() {
        const video = document.getElementById('videoPlayer');
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const imgHeight = video.videoHeight;
        const imgWidth = video.videoWidth;
        ctx.drawImage(video, 0, 0, imgWidth*0.2, imgHeight*0.2);
        this.imgSrc = canvas.toDataURL('image/png');
        // console.log('imgSrc ' + imgHeight + ' ' + imgWidth)
        // console.log(this.imgSrc);
        var blob = this.dataURLtoBlob(this.imgSrc, "image/png")//base64转blob，全局函数
        var file = new File([blob], "video_image.png", { type: "image/png", lastModified: Date.now() })//blob转file
        return file
globalFunc.js中，此js再main.js中引用，不一定非得这么写，只是比较通用的函数没必要每个vue中都写一遍,由此到处

到处全局函数
exports.install = function(Vue, option){
    Vue.prototype.dataURLtoBlob = function (dataURI,type) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        return new Blob([new Uint8Array(array)], {type:type});
main.js中
import globalFunc from '@/components/globalFunc'
Vue.use(globalFunc)
由此，通过creatImg可以获得视频播放时的一帧，然后生成文件，此文件和input file选择的文件一样，可以通过format-data类型的post传输

缺点：video必须播放，不过设置visibility: hidden属性后用户就看不出来了
				部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
                
本网站内容如果没有注明出处，所有权均归本站，提供免费下载试用，但不得用于商业盈利。如果注明出处，则来自于互联网，本站不做商业用途。如果本站有内容侵犯到您的权益，请致函站长邮箱，本站当立即删除。
            
PSD模板
            
CSS模板
            
CMS模板
            
Ctrl+D收藏
            
订阅RSS
            
保存到桌面