ant vue学习

下载功能

downloadHistory({ids: '1,2'}).then(resp => {
  const blob = new Blob([resp], { type: 'application/x-zip-compressed' })
  const downloadLink = document.createElement('a')
  downloadLink.href = window.URL.createObjectURL(blob)
  downloadLink.download = 'video.zip'
  downloadLink.click()
  window.URL.revokeObjectURL(downloadLink.href)
})

axios下载zip文件打开失败

axios下载文件大小不对，而且不能打开，需要添加请求参数responseType: 'blob',：

return request({
  url: `${api.history}/download`,
  method: 'get',
  responseType: 'blob',
  params
})

获取视频信息

获取视频封面、时长、高度、宽度

export function getVideoInfo(url, videoInfo, previewWidth, previewHeight) {
  const video = document.createElement('video')
  const canvas = document.createElement('canvas')
  video.setAttribute('crossOrigin', 'Anonymous')
  video.src = url
  video.currentTime = 1
  // 初始属性防止双向绑定失败
  videoInfo.url = url
  videoInfo.width = 0
  videoInfo.height = 0
  videoInfo.preview = ''
  videoInfo.duration = 0
  video.onloadeddata = (e) => {
    // 封面
    canvas.width = previewWidth || 960
    canvas.height = previewHeight || 640
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
    videoInfo.width = e.path[0].videoWidth
    videoInfo.height = e.path[0].videoHeight
    videoInfo.preview = canvas.toDataURL('image/png', 1)
    videoInfo.duration = Math.round(e.path[0].duration)
  }
}

数据绑定

如果绑定属性开始没有，而且出现异步更新，那么vue不能及时更新显示。

例如上面视频信息onloadeddata异步执行