首页 > 其他分享 >vue 基于 el-upload 封装视频上传组件

vue 基于 el-upload 封装视频上传组件

时间:2023-10-10 09:55:08浏览次数:46  
标签:videoObj el vue 视频 upload file 上传 mediaList

新建video-upload.vue文件:

<template>

  <div class="video-upload-com">

    <el-upload :action="uploadUrl" :before-upload="beforeAvatarUpload" :file-list="mediaList" :on-success="handleSuccess" :on-exceed="exceedTips" :limit="1" :on-remove="handleRemove">

      <el-button size="mini" type="primary">点击上传视频</el-button>

      <p v-if="tips" slot="tip" class="el-upload__tip">{{tips}}</p>

    </el-upload>

    <div v-if="mediaList&&mediaList[0]&&mediaList[0].url">

      <video :src="mediaList[0].url" style="width:320px;height:200px;" controls="controls">您的浏览器不支持视频播放</video>

    </div>

  </div>

</template>

 

<script>

export default {

  name: 'VideoUpload',

  componentName: 'VideoUpload',

  data () {

    return {

      mediaUrl: null,

      mediaList: [],

      uploadUrl: null,

      playTime: 0,

      videoSize: 0,

      videoWidth: 0,

      videoHeight: 0

    }

  },

  props: {

    value: {

      type: Array,

      default: () => [

      ]

    },

    tips: {

      type: String,

      default: '仅支持上传mp4或者MP4文件(限制50M以内)'

    },

    limitSize: {

      type: Number,

      default: 50

    },

    busiType: {

      type: Number,

      default: 2

    }

  },

  components: {},

  created () {

    this.uploadUrl = `xxx` // 上传接口url地址

    if (this.value) {

      this.mediaList = this.value

    }

  },

  watch: {

    value (val) {

      this.mediaList = this.value

    }

  },

  mounted () {

  },

  methods: {

    exceedTips (file, fileList) {

      this.$message(`最多上传${fileList.length}个文件!`)

    },

    // 移除分享图片

    handleRemove (file, fileList) {

      this.mediaList = []

      this.$emit('input', [])

    },

    handleSuccess (res, file, fileList) {

      if (res.code === 100) {

        const arr = res.result[0]

        this.mediaUrl = arr.url

        this.$emit('input', [{

          id: arr.id,

          url: arr.url,

          name: arr.fileName,

          playTime: this.playTime,

          size: this.videoSize,

          width: this.videoWidth,

          height: this.videoHeight

        }])

        this.mediaList = fileList

        // console.log('handleSuccess', this.mediaList, this.playTime, this.videoWidth, this.videoHeight)

      } else {

        this.mediaUrl = ''

        this.mediaList = []

        this.$message.error(res.desc ? res.desc : res.mobBaseRes.desc)

      }

    },

    beforeAvatarUpload (file) {

      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)

      const extension = testmsg === 'mp4' || testmsg === 'MP4'

      const size = file.size / 1024 / 1024

      this.videoSize = size

      const isLimitM = size < this.limitSize

      if (!extension) {

        this.$message.error('视频格式不正确,仅支持 mp4')

      }

      if (!isLimitM) {

        this.$message.error(`上传视频大小不能超过${this.limitSize}MB!`)

      }

      if (extension && isLimitM) {

        // 获取视频时长

        const videoUrl = URL.createObjectURL(file)

        const videoObj = document.createElement('video')

        videoObj.onloadedmetadata = () => {

          URL.revokeObjectURL(videoUrl)

          // console.log('当前视频长度', videoObj.duration, videoObj.videoWidth, videoObj.videoHeight)

          this.playTime = videoObj.duration // 视频时长

          this.videoWidth = videoObj.videoWidth // 视频宽度

          this.videoHeight = videoObj.videoHeight // 视频高度

          // 执行上传的方法,获取外网路径,上传进度等

          // resolve(videoObj)

        }

        videoObj.src = videoUrl

        videoObj.load()

      }

      // 获取文件大小

      return isLimitM && extension

    }

  }

}

</script>

 

<style lang='less'>

.video-upload-com {

  .video .el-upload-list {

    width: 326px;

    padding-left: 157px;

  }

  .el-upload-list__item {

    margin: 0 8px 0 0;

  }

  .el-upload-list__item-status-label {

    right: -24px;

    line-height: 0px;

    // text-align: left;

    i {

      position: relative;

      top: 0px;

      left: -6px;

    }

  }

}

</style>

 

然后,在需要上传视频的页面,引入组件直接使用即可:

<template>

  <div>    

    <video-upload v-model="mediaList"></video-upload>    

  </div>

</template>

<script>

import VideoUpload from '@/components/video-upload'

 

export default {

  name: 'addvidart',

  components: {

    VideoUpload

  },

  data () {

    return {

  mediaList: [

        {

           name: '',

           playTime: 0,

           url: 'https://xxx' // 图片地址

         }

       ]

     }    

  },

  props: {

  },

  watch: {

  },

  created () {    

  },

  mounted () {

  },

  methods: {    

  }

}

</script>

 

参考文章:http://blog.ncmem.com/wordpress/2023/10/10/vue-%e5%9f%ba%e4%ba%8e-el-upload-%e5%b0%81%e8%a3%85%e8%a7%86%e9%a2%91%e4%b8%8a%e4%bc%a0%e7%bb%84%e4%bb%b6/

欢迎入群一起讨论

 

 

标签:videoObj,el,vue,视频,upload,file,上传,mediaList
From: https://www.cnblogs.com/songsu/p/17753816.html

相关文章

  • @GetMapping、@PostMapping、@PutMapping、@DeleteMapping 的区别?
    对于@GetMapping、@PostMapping、@PutMapping、@DeleteMapping,首先我们得谈到RESTFUL风格接口,常用的URL请求方式就包括了GET、POST、PUT、DELETE等:谈到@GetMapping、@PostMapping、@PutMapping、@DeleteMapping等注解,首先得讲到@RequestMaping:@RequestMaping主要是将HTTP请求映......
  • Implicit Autoencoder for Point-Cloud Self-Supervised Representation Learning论文
    ImplicitAutoencoderforPoint-CloudSelf-SupervisedRepresentationLearning2023ICCV*SimingYan,ZhenpeiYang,HaoxiangLi,ChenSong,LiGuan,HaoKang,GangHua,QixingHuang*;ProceedingsoftheIEEE/CVFInternationalConferenceonComputerVision......
  • Vue 异步更新、$nextTick
    Vue是异步更新DOM的,想要在dom更新完成之后做某件事,可以使用 $nextTick  $nextTick:等dom更新后,才会触发执行此方法里的函数体语法:this.$nextTick( ()=>{   //业务逻辑}) eg:this.$nextTick( ()=>{   this.$refs.inp.focus()})......
  • element ui 列表页 新增修改查看表单
    列表页直接操作删除,新增修改查看用一个子组件表单实现列表<template><divclass="mod-configml10"><!--搜索--><divclass="searchsearchHead"v-show="showSearch"><el-formref="searchForm":model="se......
  • 一次性按要求替换多个文件的名称:PowerShell
      本文介绍基于PowerShell语言,对文件夹中全部文件的名称加以批量替换、修改的方法。  在之前的文章Python批量自动修改大量文件的名称中,我们介绍了基于Python语言,批量修改大量文件的名称的方法。当时我们修改文件名的需求比较复杂,因此选择了用Python语言来实现;而在我们的需求......
  • vue显示echarts报错——echarts未在vue界面中定义init——TypeError: Cannot read pro
    问题描述本来按照网上的教程说是想要定义一个全局变量,就不需要在每个需要用到echarts组件的vue页面里面重新定义了,直接使用就行,然后就报错了;问题解决我觉得应该是我的全局变量定义错误了,但是吧,我就直接改成在该vue页面定义了它,然后再使用:就没有再使用到那个全局变量,直接这......
  • 启动vue项目报错——ERROR Error loading vue.config.js: ERROR TypeError: defineCon
    问题描述在我引入echarts模块之前是ok的,引入之后就启动失败了;问题解决一般情况下,都是该项目的版本与本机cmd里面的版本不对应导致的;只需要使用这个命令npmupgrade,更新版本,一直yes下去,就能够解决这个问题啦!......
  • Vue组件各个属性执行顺序问题
    转自:https://blog.csdn.net/m0_62763606/article/details/131694339       在制作波动短视频效果时,在data中定义了一个变量,默认值为null。后来该变量在mounted中被赋值,而后在watch侦听属性中使用立即侦听时使用了该变量却显示为null,后发现这关系到各个组件属性执行顺序问......
  • v-model 原理、v-model 应用于组件 实现组件通信
    原理:v-model本质上是一个语法糖。例如应用在输入框上,就是value属性和input事件的合写(如果应用于复选框,就是checked属性和change事件的合写,下拉菜单是value属性和change事件的合写)作用:提供数据的双向绑定     ①数据变,视图跟着变  :value   ......
  • 论文阅读(一)—— Adding Conditional Control to Text-to-Image Diffusion Models
    ......