vue+element上传视频加其他的参数

                <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时遇到的问题都解决了，特别棒

vue+element上传视频加其他的参数

猜你喜欢