el-upload上传视频

** el-upload上传视频：

// 实现思路（上传成功 showVideoPath有值时显示viedo 没有显示上传的样式）

       <el-upload
                :action="'/api/。。。'"
                :on-progress="uploadVideoProcess"
                :on-success="handleVideoSuccess"
                :before-upload="beforeUploadVideo"
                :file-list="fileList"
                :on-remove="handleRemoveVideoList"
                :limit="1"
                :on-preview="handleDownload"
                :show-file-list="false"
                :on-exceed="handleExceed">
                <div v-if="showVideoPath" style="position: relative">
                  <video :src="showVideoPath" class="avatar video-avatar" controls="controls">
                    您的浏览器不支持视频播放
                  </video>
                  <i class="el-icon-error deletViedo" @click.stop="romoveVideo"></i>
                </div>
                <i v-if="!showVideoPath" class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip" style="color: red">
                  最多可以上传1个视频，建议大小50M，推荐格式mp4
                </div>
              </el-upload>

data(){
    return{
        showVideoPath:"",  
        filrList:[]  

    }
}

    //上传前回调
    beforeUploadVideo(file) {
      let 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
      ) {
        this.msgError('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        this.msgError('视频大小不能超过50MB')
        return false
      }
    },
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = file.percentage.toFixed(0) * 1
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      debugger
      const formData = new FormData()
      formData.append('file', file.raw)
      formData.append('name', getImgUrlToFileList(file.name)[0]?.name)
      axios({
        method: 'post',
        url: '/api/fileUpload/uploadFile',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then(async (res) => {})
      this.fileList.push({
        uploadUrl: res.result.url,
        uploadType: 3,
        fileType: res.result.fileType,
        fileSize: res.result.size,
        uploadName: file.name,
        attachmentId: res?.attachmentId,
        ...this.viedo,
      })
    },
    async handleRemoveVideoList(file) {
      if (!file.attachmentId) {
        this.fileList = this.fileList.filter(
          (item) => item.uid != file.uid,
        )
        return
      }
      let attachmentId = file.attachmentId
      const res = await deleteBAttachment({
        attachmentId,
      })
      if (res.code == 200) {
        this.fileList = this.fileList.filter(
          (item) => item.uid != file.uid,
        )
      }
    },
    handleDownload(file) {
      this.$confirm('是否下载当前视频？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '正在下载',
          })
          const elink = document.createElement('a')

          elink.href = file.url

          elink.setAttribute('download', file.name)

          elink.style.display = 'none'

          document.body.appendChild(elink)

          setTimeout(() => {
            undefined

            elink.click()

            document.body.removeChild(elink)
          }, 66)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消下载',
          })
        })
    },
    handleExceed() {
      this.msgWaring('最多上传一个视频文件')
    },

删除viedo ： // 直接删除viedo的src绑定值 删除upload的fileList

    romoveVideo() {
      this.$confirm('确定删除模板？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        if (this.contentAttachmentFileList && this.contentAttachmentFileList.length) {
          let attachmentId = this.contentAttachmentFileList[0]?.attachmentId
          const res = await apiConfig.deleteBAttachment({
            attachmentId: attachmentId,
          })
          if (res.code == 200) {
            this.showVideoPath = ''
            this.EditorForm.contentAttachmentList = []
            this.form.contentAttachmentList = []
          }
        } else {
          this.showVideoPath = ''
          this.EditorForm.contentAttachmentList = []
          this.form.contentAttachmentList = []
        }
      })
    },

监听file-list绑定的值：// 直接给viedo的src赋值

watch:{
        filelist: {
      handler: async function (val1, val2) {
        if (val1 && val1?.length && val1[0].uploadUrl) {
          this.showVideoPath = `${process.env.VUE_APP_URL}${val1[0]?.uploadUrl}`
        }
      },
      immediate: true,
      deep: true,
    },
}