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

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

<template>
<div>
 <van-uploader
   upload-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 newBlob
      return 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); //绘制canvas
          dataURL = canvas.toDataURL("image/png"); //转换为base64
          let 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>