element ui视频上传(已上线,拿去即用)

Posted 欧阳呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element ui视频上传(已上线,拿去即用)相关的知识,希望对你有一定的参考价值。

element ui视频上传 + 进度条实现(拿去即用)


1.template 部分

<template>
  <div class="editPage__video">
    <div class="title">视频设置</div>
    <div class="img__con">
      <el-upload
        class="avatar-uploader"
        :action="uploadImgUrl"
        :data="uploadImgData"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-progress="uploadVideoProcess"
      >
        <video width="100%" v-if="imageUrl" controls="controls" :key="menuKey">
          <source :src="rightData.props.src" type="video/mp4" />
        </video>
        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <el-progress
          v-if="videoFlag == true"
          type="line"
          :percentage="videoUploadPercent"
          style="margin-top: 30px"
        ></el-progress>
      </el-upload>

      <p>
        说明: 视频格式为mp4格式,每个视频大小不超过300m
      </p>
    </div>
  </div>
</template>
  • 考虑到有些小伙伴不一定需要进度条,所以顺便说下怎么把它干掉,代码如下:
  • 对应的变量和方案也干掉就是了
:on-progress="uploadVideoProcess"
<el-progress
  v-if="videoFlag == true"
   type="line"
   :percentage="videoUploadPercent"
   style="margin-top: 30px"
 ></el-progress>

2. script 部分

  • 在我的实际业务中,this.rightData是父级组件传过来的值,大家用的时候记得去掉,替换成自己的就成
data() 
    return 
      imageUrl: this.rightData.imageUrl,
      // 视频上传
      uploadImgUrl: `$process.env.VUE_APP_BASE_API/common-server/aliFile/upLoadVideo`,
      uploadImgData:  busiName: 32 ,
      // 应付多个组件的情况 记录当前组件的key值
      componentKey: null,
      menuKey: 1, // 用来强制刷新
      videoFlag: false,  // 进度条相关的
      videoUploadPercent: 0,  // 进度条相关的
    ;
  ,
  methods: 
    // 上传成功的函数
    handleAvatarSuccess(res, file) 
       // 进度条恢复到初始状态
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      ++this.menuKey;
      // console.log(res)
      this.imageUrl = res.data.url;
      // 这里是向父级传值,不需要就去掉
      this.$emit("childRightFn", 
        ...this.rightData,
        ... imageUrl: this.imageUrl ,
        ... props:  src: this.imageUrl  ,
      );
    ,
    beforeAvatarUpload(file) 
      //   file.type === "image/jpg" ||
      //   file.type === "image/png";
      const isMp4 = file.type === "video/mp4";
      // 限制文件最大不能超过 300M
      const isLt2M = file.size / 1024 / 1024 < 300;

      if (!isMp4) 
        this.$message.error("视频只能是mp4格式!");
      
      if (!isLt2M) 
        this.$message.error("上传头像图片大小不能超过 300MB!");
      
      return isMp4 && isLt2M;
    ,

    //进度条
    uploadVideoProcess(event, file, fileList) 
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
    ,
 

  • 有个东西重点说一下:menuKey
++this.menuKey;
  1. 如果video的src发生变化,预览是不会变化的
  2. 所以给此标签加了唯一的key值,每次上传成功key都会变化,让其强制刷新

3. scss 部分

  • 这里也请大家按需取用,不需要删掉就是,不要原封不动的搬
<style lang="scss" scoped>
.editPage__video 
  .avatar-uploader .el-upload 
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  
  .avatar-uploader .el-upload:hover 
    border-color: #409eff;
  
  .avatar-uploader-icon 
    font-size: 16px;
    color: #8c939d;
    width: 350px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  
  .avatar 
    width: 350px;
    height: auto;
    display: block;
  
  .title 
    font-size: 18px;
    margin-bottom: 20px;
  
  .img__con 
    .el-button 
      width: 100%;
      margin: 10px 0 20px 0;
    
  

</style>
  • 加了很多注释,相信大家问题不大了,有问题可以加主页的群

1. 希望本文能对大家有所帮助,如有错误,敬请指出

2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我(主页有Q)

以上是关于element ui视频上传(已上线,拿去即用)的主要内容,如果未能解决你的问题,请参考以下文章

element ui视频上传(已上线,拿去即用)

微信小程序压缩图片并上传到服务器(拿去即用)

前端清除项目默认样式拿去即用

零基础也能学会,原生JS实现图片轮播(附源码,拿去即用)

零基础也能学会,原生JS实现图片轮播(附源码,拿去即用)

element UI使用Upload 上传视频,图片