vue 上传多图片及视频

HTML部分

<el-form-item label="视频列表" >
              <template v-for="item in (deviceTypeForm.imageUrl||'').split(',')">
              <video
                v-if="deviceTypeForm.imageUrl"
                v-bind:src="item"
                class="avatar video-avatar"
                controls="controls" style="width:300px">
                您的浏览器不支持视频播放
              </video>
              <i class="el-icon-delete" @click="deleteVideo(item)" v-if="deviceTypeForm.imageUrl"></i>
            </template>
          <el-upload class="avatar-uploader"
            :action="uploadImgUrl"
            :headers="{
              'Authorization': token
            }"
            v-bind:on-progress="uploadVideoProcess"
            v-bind:on-success="handleVideoSuccess"
            v-bind:before-upload="beforeUploadVideo"
            v-bind:show-file-list="false">
                <el-button size="small" icon="el-icon-upload" type="primary" style="position: absolute;bottom: 15px;margin-left: 20px;">上传</el-button>
            <el-progress v-if="videoFlag == true"
                type="circle"
                v-bind:percentage="videoUploadPercent"
                style="margin-top:7px;">
            </el-progress>

data部分：

token: localStorage.getItem("token"),//根据自己项目是否需要
        //是否显示进度条
        videoUploadPercent: "",
        //进度条的进度，
        isShowUploadVideo: false,
        //视频的上传路径
        uploadImgUrl: process.env.VUE_APP_BASE_API + "/water/file/upload/minio",
        videoFlag: false, // 进度条相关的
        videoUploadPercent: 0, // 进度条相关的

methods部分：

//上传前回调
beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50;
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
          console.log("请上传正确的视频格式");
           this.$message.error('请上传正确的视频格式');
          return false;
      }
      if (!fileSize) {
          console.log("视频大小不能超过50MB");
          this.$message.error('视频大小不能超过50MB');
          return false;
      }
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      debugger
      console.log(res)
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if(res.code == 200){
        console.log(res.data[0].url)
        if(this.deviceTypeForm.imageUrl){
          this.deviceTypeForm.imageUrl = this.deviceTypeForm.imageUrl + ',' + res.data[0].url
        }else{
          this.deviceTypeForm.imageUrl = res.data[0].url
        }
      }else{
         this.$message.error('上传视频失败');
      }
    },
    //删除视频
    deleteVideo(e){
      console.log(e)
      var video = this.deviceTypeForm.imageUrl
      var li = video.split(',')
      //获取索引
      var index = li.indexOf(e);
      if(index>-1){
        //删除数组中的元素
        li.splice(index, 1)
      }
      //将数组转换成字符串
      this.deviceTypeForm.imageUrl=li.join(',')
      console.log('此时的video',this.deviceTypeForm.imageUrl)
      
    },

效果展示：

注：根据自己的代码修改部分属性，样式还得需要调整一下。