el-upload 直传阿里 oss 并且显示自带进度条和视频回显封面图

export default {
  data() {
    return {
      oss: {
        host: ''
      },
      fileList: []
    }
  },
  methods: {
    async getStorageInfo() {
      const pro = new Promise(resolve => {
        // 判断签名有没有过期
        const res = JSON.parse(localStorage.getItem('sign'))
        const timestamp = Date.parse(new Date()) / 1000
        if (res && res.expire - 3 > timestamp) {
          resolve(res)
        } else {
          this.axios('阿里云上传的地址').then(res => {
            if (res.status == 200) {
              localStorage.setItem('sign', JSON.stringify(res.data))
              resolve(res.data)
            }
          })
        }
      })
      return await pro
    },
    async beforeUpload(file) {
      // 校验一下文件格式和大小的限制
      // do something

      // 校验通过
      let filename = file.name
      let picName = this.random_string(10) + this.get_suffix(filename)
      const storageInfo = await this.getStorageInfo()
      this.oss = {
        ...storageInfo,
        OSSAccessKeyId: storageInfo.accessKey,
        key: storageInfo.dir + picName,
        name: filename,
        success_action_status: 200
      }
    }
  }
}

// 覆盖默认的上传行为，可以自定义上传的实现
async uploadFile(param) {
  // param.file 就是上传文件本身

  const formData = new FormData()
  formData.append('file', param.file)
  // something set formData

  // 发起请求
  axios({
    method: 'post',
    url: oss.host,
    data: formData,
    // 重点一：complete 就是处理后的上传进度数值 1-100
    onUploadProgress: progressEvent => {
      const complete = parseInt(((progressEvent.loaded / progressEvent.total) * 100) | 0, 10)
      // 重点二：onProgress() 方法需要以上方接收的形参来调用
      // 这个方法有一个参数"percent"，给他进度值 complete 即可
      param.onProgress({ percent: complete })
    }
  }).then(res => {
    console.log(res)
  })
}

async uploadFile(param) {
  console.log('_tag***', param)
  // something set formData

  // 注意看这里，加了 return
  return axios({
    method: 'post',
    // something
  }).then(res => {
    console.log(res)
  })
}

getVideoCover(file) {
  let _self = this
  _self.$set(file, 'videoUrl', _self.$utils.deepClone(file.url)) //备份视频源路径，用于后续预览展示

  const video = document.createElement('video') // 也可以自己创建 video
  video.src = file.url // url 地址 url 跟 视频流是一样的
  file.url = videoDefCover //设置默认封面，videoDefCover 为预制的默认封面，不需要可去除或替换成自己的
  let canvas = document.createElement('canvas') // 获取 canvas 对象
  const ctx = canvas.getContext('2d') // 绘制 2d
  video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
  video.currentTime = 1 // 第一帧

  video.oncanplay = () => {
    console.log(video.clientWidth, video.clientHeight)
    canvas.width = video.clientWidth ? video.clientWidth : 320 // 获取视频宽度
    canvas.height = video.clientHeight ? video.clientHeight : 320 //获取视频高度
    // 利用 canvas 对象方法绘图
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
    // 转换成 base64 形式
    let _videoFirstimgsrc = canvas.toDataURL('image/png') // 截取后的视频封面
    _self.$set(file, 'url', _videoFirstimgsrc) //重置文件的 url 为当前截取的封面，用于 el-upload 展示
    video.remove()
    canvas.remove()
  }
}

handleUploadSuccess(response, file, fileList) {
  //为 el-upload on-success 方法实现
  let _self = this
  _self.fileList = fileList
  if (response.code != 0) {
    _self.$message({
      message: '附件上传失败',
      type: 'error'
    })
    _self.fileList.splice(_self.fileList.indexOf(file, 1))
  } else {
    let _fileName = file.name
    if (_self.$utils.getFileIsVideo(_fileName)) {
      //getFileIsVideo 为我本地自定义判断是否是视频方法，可自己修改
      //视频附件，获取第一帧画面作为 封面展示
      _self.getVideoCover(file)
    }
  }
}

const controller = new AbortController()
Promise.prototype.abort = () => {
  controller.abort()
}
return this.$axios({
  // 注意要添加这个
  signal: controller.signal
})

// http-request
const CancelToken = this.$axios.CancelToken
const source = CancelToken.source()
this.sourceList.push({
  id: uid,
  source
})
this.$axios({
  cancelToken: source.token
})
  .then(async () => {
    onSuccess()
  })
  .catch(() => {
    onError()
  })

// onRemove
const source = this.sourceList.find(item => item.id === file.uid)
if (source) {
  source.source.cancel()
}

new XMLHttpRequest()
// 监听文件上传的进度
xhr.upload.onprogress = e => {
  if (e.lengthComputable) {
    onProgress({ percent: Math.ceil((e.loaded / e.total) * 100) })
  }
}
xhr.open('POST', host)
xhr.send(data)
xhr.onreadystatechange = async () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 手动调用上传成功勾子，这里第一个参数会传递个 onSuccess 方法
    onSuccess(xhr.responseText)
  }
}
return xhr

onRemove(file) {
  this.fileList = this.fileList.filter(item => item !== file)
}

onChange(file, fileList) {
  this.fileList = fileList
}

// mixins/drawCover.js
export default {
  data() {
    return {
      canvasWidth: 146,
      canvasHeight: 146,
      videoImageSrc: 'data:image/png;base64'
    }
  },
  methods: {
    // 获取视频某一帧
    async captureFrame(params = {}) {
      const { vdoUrl, time = 0 } = params
      if (!vdoUrl) {
        return await this.drawImage()
      }
      return new Promise(resolve => {
        const vdo = document.createElement('video')
        vdo.src = vdoUrl
        vdo.currentTime = time
        vdo.muted = true
        vdo.autoplay = true
        vdo.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
        vdo.oncanplay = async () => {
          resolve(await this.drawVideo(vdo))
        }
        vdo.onerror = async () => {
          resolve(await this.drawImage())
        }
      })
    },

    // 截取视频
    async drawVideo(vdo) {
      const canvas = document.createElement('canvas')
      canvas.width = vdo.videoWidth
      canvas.height = vdo.videoHeight
      const ctx = canvas.getContext('2d')
      ctx.drawImage(vdo, 0, 0, canvas.width, canvas.height)

      const dataURL = canvas.toDataURL('image/png')
      vdo.remove()
      canvas.remove()
      return dataURL
    },

    // 绘制默认视频封面
    async drawImage() {
      const canvas = document.createElement('canvas')
      canvas.width = this.canvasWidth
      canvas.height = this.canvasHeight
      const ctx = canvas.getContext('2d')
      ctx.fillStyle = '#E4E4E4'
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      await this.drawCustomImage(canvas, this.videoImageSrc)

      const dataURL = canvas.toDataURL('image/png')
      canvas.remove()
      return dataURL
    },

    // 加载图片资源
    loadImage(str) {
      return new Promise(resolve => {
        const playImage = new Image()
        playImage.src = str
        playImage.onload = () => {
          resolve(playImage)
        }
      })
    },

    async drawCustomImage(canvas, src, width, height) {
      // 绘制自定义图片
      const image = await this.loadImage(src)
      width = width || image.width
      height = height || image.height
      const x = (canvas.width - width) / 2
      const y = (canvas.height - height) / 2
      canvas.getContext('2d').drawImage(image, x, y, width, height)
      image.remove()
    }
  }
}

// 图片只支持 jpg/png 格式，视频只支持 mp4,.rmvb,.avi,.wmv 格式
const imageFileTypes = ['jpeg', 'png', 'jpg']
const videoFileTypes = ['mp4', 'avi', 'wmv', 'rmvb']

const imageAccept = `.${imageFileTypes.join(',.')}`
const videoAccept = `.${videoFileTypes.join(',.')}`

getFileType(fileName) {
  return fileName.split('.').pop()
},

beforeUpload(file) {
  const fileType = this.getFileType(file.name)
  if (!imageFileTypes.includes(fileType) && !videoFileTypes.includes(fileType)) {
    this.$message.warning(
      '上传图片只能是.jpg 或.png 格式！上传视频只能是.mp4,.rmvb,.avi,.wmv 格式！'
    )
    return false
  }
  // 大小不能超过 100MB
  const isLtSize = file.size / 1024 / 1024 < maxFileSize
  if (!isLtSize) {
    this.$message.warning(`上传文件大小不能超过 ${maxFileSize}MB！`)
  }
  return isLtSize
},