upload上传视频

众所周知,element ui里面的上传组件并没有上传视频功能,即使上传成功,也不支持在线预览,so我找到了一份比较好的源码,供大家参考及自己以后使用。

 <el-upload ref="newupload" class="avatar-uploader" :show-file-list="false" action="123" :limit="1"  :before-upload="beforeUpload" :on-success="uplaodSuccess">

                <!-- <video :src="src" style="width:100%;height: 150px;" v-if="src"></video> -->

                <i class="el-icon-plus"  slot="trigger" style="margin-top: 50px;font-size: ;50px" ></i><br>

                <video width="90" height="50" controls v-if="src">

  <source :src="src" type="video/mp4"  style="width:50px;height: 50px;">

您的浏览器不支持 video 标签。

</video>

               

                </el-upload>

下面这个是我们公司的一个附件上传接口

 beforeUpload(file) {

      const formData = new FormData();

      formData.append('file', file);

      var data = {

        file: formData,

        bizId: 0,

        bizType: 'wordbook.key.hint',

        id: 0,

        isSingle: true,

      };

      Library.uploadFile(formData, data).then(

        (res) => {

          this.src = res.data.data.url;

        },

        (res) => {

          console.log('err ', res);

        }

      );

      return false;

    },

这行没什么卵用

 uplaodSuccess() {

      console.log('upload');

    },

下面是关于点击确定提交数据的操作

   addTeachVideo() {

      let data={

        image:this.imagsrc,

        name:this.name,

        resourceId:this.ii,

        seqno:this.seqno,

        video:this.src,

        wordId:this.info.id

      }

      console.log(data)

      Chuanqijudge.videos(data).then((res)=>{

        console.log('教学视频测试',res)

      })

      this.getlist()

      this.TeachVideo=false

    },

因为逻辑比较轻松,在这里不过多介绍代码,基本cv就能用。最后element ui不要忘了加清空