vant-upoader 视频上传和截帧处理

本文主要是介绍vant-upoader 视频上传和截帧处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用vant-uploader 文件上传，视频截帧以及ios 视频的兼容的处理方式

<template>
<div><van-uploaderupload-icon="https://file.baojunev.com/group1/default/20210527/14/51/6/video_icon@2x.png"accept="video/*":before-read="beforeRead":after-read="afterRead"/>
</div>
</template>
<script>
import Vue from "vue";
import { Uploader } from "vant";
Vue.use(Uploader);export default {
data(){
return {
}
}
methods:{async afterRead(file) {const that = this;// 将选中的上传文件转化为二进制文件，显示在页面上let uploadUrl = URL.createObjectURL(file.file); // 截取视频帧数，获取封面await that.getVideoBase64(uploadUrl).then((res) => {that.videoPoster = res;});let formData = new FormData(); // 为上传文件定义一个formData对象let config = {headers: {"Content-Type": "multipart/form-data",},};formData.append("file", file.file); this.loading = true;let type = file.file.type.split('/')[1]axios({url: `/connector?prefix=${type}&isRelativePath=true`,method: "post",data: formData,...config,withCredentials: false,timeout: 40000,}).then(function (data) {console.log(data,'测试的')that.loading = false;that.videoUrl = that.videoConfig + data.info.url}).catch(function (data) {console.log("data",data);});},beforeRead(file) {if (!file.type.includes("video")) {window.appAction("toast", ["请上传视频文件"]);return false;} else if (file.size > 400 * 1024 * 1024) {window.appAction("toast", ["视频大小超过限制"]);return false;} else {return true;}},//base64 转成文件流dataURLtoFile(dataurl, filename) {var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}// 方式1：// let newBlob = new Blob([u8arr],"file", {//         type: mime//     });//     newBlob.lastModifiedDate = new Date();//     newBlob.name = Date.now() + '.png';//     return newBlobreturn new File([u8arr], Date.now() + ".png", { type: mime });},//截取视频某帧getVideoBase64(url) {const that = this;return new Promise(function (resolve, reject) {let dataURL = "";let ua = navigator.userAgent.toLowerCase();//  ios 存在video标签不显示同时ios手机端视频上传的格式是.mov格式的文件，故ios视频上传的视频采用默认视频封面提的处理方式，let isIos = ua.match(/Android/i) ? false : true;if(url.includes('.mov') || isIos){let imgUrl ='https://file.baojunev.com/group1/default/20210601/19/05/6/poster_video.jpg'resolve(imgUrl)}else{let video = document.createElement("video");video.setAttribute("crossOrigin", "anonymous"); //处理跨域video.setAttribute("src", url);video.setAttribute("width", 304);video.setAttribute("height", 180);video.currentTime = 0.5;video.addEventListener("loadeddata", function () {let canvas = document.createElement("canvas");let width = video.width; //canvas的尺寸和图片一样let height = video.height;canvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvasdataURL = canvas.toDataURL("image/png"); //转换为base64let file = that.dataURLtoFile(dataURL, "file");console.log(file, "file");const suffix = `.${file.type.split("/")[1]}`;const size_list = file.size;let formData = new FormData();formData.append("file", file);axios({url:`/upload?simple_name=1&suffix=${suffix}&size_list=` +size_list,method: "post",data: formData,cache: false,contentType: false,processData: false,dataType: "json",timeout: 20000,withCredentials: false,}).then(function (data) {resolve(data.TFS_FILE_NAME[0]);});});}});},}
</script>