在uniapp中nvue页面中将上传的视频通过前端获取第一帧，并将第一帧图片保存到后端<video style="height: 350rpx;width: 750rpx;" :src="urls"/><view @click="upload(item)"> upload(item) { uni.chooseVideo({count: 1,sourceType: ['camera', 'album'],success: (e) => {filePath: e.tempFilePath解决案例

在uniapp中nvue页面中获取视频第一帧图片并保存到后端的解决方案如下：

1. 在template中添加一个canvas和video标签，用于获取视频第一帧图片和展示视频：

<template>
  <view>
    <canvas style="display: none;"></canvas>
    <video style="height: 350rpx;width: 750rpx;" :src="urls" @loadedmetadata="getFirstFrame"></video>
  </view>
</template>

2. 在methods中定义一个获取视频第一帧图片的方法getFirstFrame：

methods: {
  getFirstFrame() {
    const video = this.$refs.video
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    const { videoWidth, videoHeight } = video
    canvas.width = videoWidth
    canvas.height = videoHeight
    ctx.drawImage(video, 0, 0, videoWidth, videoHeight)
    canvas.toBlob((blob) => {
      this.upload(blob)
    }, 'image/jpeg', 0.8)
  },
  upload(blob) {
    // 将blob数据上传到后端
  }
}

3. 在上传方法中将获取到的blob数据上传到后端即可。

需要注意的是，canvas.toBlob方法在iOS设备上可能会出现兼容性问题，此时可以使用canvas.toDataURL方法将图片数据转换成base64编码的字符串再上传到后端。同时，由于获取视频第一帧图片是在视频加载完成后进行的，因此在nvue页面中需要对视频加载状态进行监听，如上面例子中的@loadedmetadata事件。