在uniapp中nvue页面用不了Canvas怎办，将上传的视频通过前端获取第一帧,并将第一帧图片保存到后端<video style=height: 350rpx;width: 750rpx; :src=urls/><view @click=upload(item)> upload(item) { uni.chooseVideo({count: 1,

在uni-app中，你可以通过以下步骤获取视频的第一帧，并将第一帧保存到后端：

1. 在模板中，通过`<video>`标签来加载视频：

<video style="height: 350rpx;width: 750rpx;" :src="videoUrl" @loadedmetadata="handleLoadedMetadata"></video>

这里我们绑定了`videoUrl`变量来加载视频，同时绑定了`loadedmetadata`事件，用于在视频元数据加载完成后调用`handleLoadedMetadata`函数。

2. 在脚本中，定义`videoUrl`变量，并在`handleLoadedMetadata`函数中获取视频第一帧：

export default {
  data() {
    return {
      videoUrl: '', // 视频地址
      thumbnailUrl: '', // 缩略图地址
    }
  },
  methods: {
    handleLoadedMetadata() {
      const video = this.$refs.video // 获取视频元素
      const canvas = document.createElement('canvas') // 创建画布
      canvas.width = video.videoWidth // 设置画布宽度
      canvas.height = video.videoHeight // 设置画布高度
      const ctx = canvas.getContext('2d') // 获取画布上下文
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height) // 绘制视频帧
      const thumbnailUrl = canvas.toDataURL('image/jpeg') // 将画布转为base64格式
      this.thumbnailUrl = thumbnailUrl // 将缩略图地址保存到变量中
    },
    async upload(item) {
      // 将缩略图上传到后端
      const res = await uni.request({
        url: 'your_backend_upload_api',
        method: 'POST',
        header: {
          'Content-Type': 'application/json'
        },
        data: {
          thumbnailUrl: this.thumbnailUrl
        }
      })
      console.log(res)
    }
  }
}

在`handleLoadedMetadata`函数中，我们通过`this.$refs.video`获取视频元素，然后创建一个画布，并将画布的宽高设置为视频的宽高。接着，我们通过画布的`getContext`方法获取画布上下文，调用`drawImage`方法绘制视频帧，最后通过`toDataURL`方法将画布转为base64格式的图片。将这个base64格式的图片地址保存到`thumbnailUrl`变量中。

3. 在上传视频的方法中，将缩略图上传到后端：

async upload(item) {
  // 选择视频文件
  const res = await uni.chooseVideo({
    count: 1,
    success: (res) => {
      this.videoUrl = res.tempFilePath // 将视频地址保存到变量中
    }
  })
  // 将缩略图上传到后端
  const res = await uni.request({
    url: 'your_backend_upload_api',
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    data: {
      thumbnailUrl: this.thumbnailUrl
    }
  })
  console.log(res)
}

在这个方法中，我们通过`uni.chooseVideo`方法选择视频文件，并将视频地址保存到`videoUrl`变量中。接着，我们调用`uni.request`方法将缩略图的base64格式的地址上传到后端。

需要注意的是，由于视频第一帧的绘制是异步的，因此在上传缩略图时需要确保第一帧已经绘制完成。如果上传缩略图的方法与视频加载的方法不在同一个组件中，可以将`thumbnailUrl`保存到全局变量中，在上传缩略图时再取出使用。