视频上传并截取图片---原生js篇（input标签）

<el-form-item
        label="视频"
        prop="videoUrl"
        :rules="[{ required: true, message: '请上传视频' }]"
      >
        <div id="div1"></div>
        <el-progress
          class="mt20px"
          v-show="progress > 0 && progress < 100"
          :text-inside="true"
          :stroke-width="14"
          :percentage="progress"
          status="success"
        ></el-progress>
        <input
          id="browse"
          style="width: 72px; height: 30px; line-height: 30px; font-size: 14px"
          :disabled="progress > 0 && progress < 100"
          type="file"
          @change="previewFiles"
        />
        <canvas
          id="myCanvas"
          width="320"
          height="200"
          style="display: none"
        ></canvas>
        <el-button
          v-if="!isVideoShow"
          style="margin-left: 50px"
          type="primary"
          size="small"
          @click="saveImage('videodiv', 'cover')"
          >截取为封面图</el-button
        >
      </el-form-item>

//借用七牛上传将input标签上传的二进制链接转换成类似“http://studioyszimg.yxj.org.cn/1692538307796.png”的简单链接。


//引入七牛文件
import Uploader from '@/server/qiniu/index';

previewFiles(e) {
      let self = this
      console.log('e', e);
      const file = document.getElementById('browse').files[0];
      console.log('files', file);
      new Uploader({
        file: file,
        fileName: file.name,
        quality: self.options.quality || 0.9,
        onError(err) {
        //上传出错的回调
          console.log(err);
        },
        onProgress(res) {
            //上传进行中的回调（在这里可以写一个进度条，当进度条为100时，则代表上传成功）
          const percent = res.total.percent;
          self.progress = parseInt(percent, 10);
          if (self.progress == 100) {
            self.isVideoShow = false
            // self.firstImg = true
            const fileReader = new FileReader()
            fileReader.readAsDataURL(file)
            fileReader.onload = function (e) {
              let video = document.createElement('video')
              video.src = e.target.result
              video.controls = true
              video.setAttribute('id', 'videodiv')
              if (document.getElementById('div1').getElementsByTagName('video').length !== 0) {
                let res = document.getElementById('videodiv')
                document.getElementById('div1').removeChild(res)
              }
              document.getElementById('div1').appendChild(video)
              document.getElementById('videodiv').addEventListener("loadedmetadata", () => {
                console.log(document.getElementById('videodiv').duration, 'pppp');
                if (document.getElementById('videodiv').offsetWidth > document.getElementById('videodiv').offsetHeight) {
                  console.log('hahahhahahahhahahah');
                  self.screenType = false
                } else {
                  console.log('kkkkkkkkk');
                  self.screenType = true
                }
                self.$set(self.form, 'duration', document.getElementById('videodiv').duration)
                self.$set(self.form, 'multipleCoverImgUrl', [])
              });
            }
          }
        },
        onSuccess(res) {
          //上传成功的回调
          console.log(res, 'hahha');
          self.$set(self.form, 'videoUrl', res.url)
          self.$set(self.form, 'videoName', file.name)
          self.$set(self.form, 'fileSize', file.size)
        }
      });



    },




import html2canvas from 'html2canvas'

//截取为封面图（这里用到了画布需要先引入）
    saveImage(val, type) {
      let myBox = document.getElementById(val)
      html2canvas(myBox, {
        useCORS: true,
        allowTaint: true,
        scrollX: 0,
        scrollY: 0,
        backgroundColor: "transparent",

      }).then((canvas) => {
        const dataUrl = canvas.toDataURL('image/jpeg');//图片转为下载路径
        if (type == 'cover') {
          this.upImage(dataUrl)
        }

      });
    },