<el-form-item label="添加视频" class="video-upload">
                  <el-upload
                    class="avatar-uploader"
                    action="接口地址"
                    accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'  //格式类型
                    :data="paramsdata"                                 //其他参数
                    :show-file-list="false"
                    :before-upload="beforeUploadVideo"                 //用来判断大小
                    :on-success="handleVideoSuccess"                   
                    :on-progress="uploadVideoProcess">                 //用来显示进度条
                    <video
                      v-if="Video !='' && videoFlag == false"
                      :src="Video"
                      width="350"
                      height="180"
                      controls="controls"
                    >您的浏览器不支持视频播放</video>    //视频上传成功之后显示
                    <i
                      v-else-if="Video =='' && videoFlag == false"
                      class="el-icon-plus avatar-uploader-icon"
                    ></i>            //没选择视频之前显示
                    <el-progress
                      v-if="videoFlag == true"
                      type="circle"
                      :percentage="videoUploadPercent"
                      style="margin-top:30px"
                    ></el-progress>    //如果视频正在上传的时候显示
                  </el-upload>
                </el-form-item>
data(){
    return {
        videoFlag:false,      //刚开始的时候显示为flase
        videoUploadPercent: '0%',  //进度条刚开始的时候为0%
        paramsdata:{
            '参数': '参数值'    //添加其他参数
        }
    }
}

 

    beforeUploadVideo(file) {          //视频上传之前判断他的大小
      const isLt10M = file.size / 1024 / 1024  < 2000;
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过2000MB哦!');
        return false;
      }
    },
    uploadVideoProcess(event, file, fileList){    //视频上传的时候获取上传进度传给进度条
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
      console.log(this.videoUploadPercent)
    },
    handleVideoSuccess(res, file) {           //视频上传成功之后返回视频地址
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      console.log(res)
      this.Video = res.data[0];
    },

为了这个上传视频琢磨了好长时间。在网上找到东西。但是可能是因为少东西。所以总是错。现在记下来防止以后忘记。

献上两个地址

原文章

这个我感觉把我在用upload时遇到的问题都解决了,特别棒

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐