【UNIAPP】获取视频的第一帧作为封面（基于视频URL，Canvas）复制即用

关键代码(复制即用)

注意，包裹这些代码的函数，需要用async修饰。 代码版本是vue3的，vue2也适用【自行修改】

// 准备好你的视频地址
const videoUrl = 【视频地址 例如http://test.com/xxx.mp4】;
// 1.创建视频元素
const video = document.createElement('video');
video.crossOrigin = 'anonymous'; // 处理跨域问题
video.muted = true;
video.playsInline = true;// 2.创建画布元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');try {// 等待视频元数据加载await new Promise((resolve, reject) => {video.addEventListener('loadedmetadata', resolve);video.addEventListener('error', reject);video.src = videoUrl;});// 设置视频当前帧到开始位置video.currentTime = 0;// 等待视频帧准备好await new Promise((resolve, reject) => {video.addEventListener('seeked', resolve);video.addEventListener('error', reject);});// 设置画布尺寸与视频一致anvas.width = video.videoWidth;canvas.height = video.videoHeight;// 绘制到画布ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 将画布转换为 Blobconst blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.95));// 创建文件对象const file = new File([blob], '【文件名可以自定义】.jpg', {type: 'image/jpeg',lastModified: Date.now()});console.log('封面文件:',file)let fm = await 【换成你的上传文件API接口】(file)console.log('上传封面结果',fm)data['image'] = fm.data
} catch (error) {console.error('处理失败:', error);
}

完整方法业务js

业务场景：用户选择【图文】or【视频】进行发布文章，如果是图文的话，选择第一个图片作为封面，如果是视频的话，选择视频的第一帧作为封面

const submitDiscover = async function(){if(title.value == ''){uni.showToast({title:'请输入标题',icon:'none'})return}if(content.value == ''){uni.showToast({title:'请输入内容',icon:'none'})return}if(fileList.value.length==0){uni.showToast({title:'请上传内容',icon:'none'})return}// 开始提交let data = {title: title.value,content: content.value,type: submitType.value == 'tuwen' ? '1' : '2', // 1图文 2视频，image:'',// contextImg:[],// video:''}let files = []for(let i=0;i<fileList.value.length;i++){let rs = (fileList.value[i].response)if(!rs){uni.showToast({title:'上传失败!请检查文件大小或格式',icon:'none'})return}let fileData = JSON.parse(rs)files.push(fileData.data)}if(submitType.value == 'tuwen'){data['contextImg'] = filesdata['image'] = files[0] // 设置封面图}else{// 视频data['video'] = files[0]// 封面要获取视频的第一帧并上传// data['image'] = files[0]console.log('获取封面:',fileList.value[0])const videoUrl = files[0];// 创建视频元素const video = document.createElement('video');video.crossOrigin = 'anonymous'; // 处理跨域问题video.muted = true;video.playsInline = true;// 创建画布元素const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');try {// 等待视频元数据加载await new Promise((resolve, reject) => {video.addEventListener('loadedmetadata', resolve);video.addEventListener('error', reject);video.src = videoUrl;});// 设置视频当前帧到开始位置video.currentTime = 0;// 等待视频帧准备好await new Promise((resolve, reject) => {video.addEventListener('seeked', resolve);video.addEventListener('error', reject);});// 设置画布尺寸与视频一致canvas.width = video.videoWidth;canvas.height = video.videoHeight;// 绘制到画布ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 将画布转换为 Blobconst blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.95));// 创建文件对象const file = new File([blob], 'file.jpg', {type: 'image/jpeg',lastModified: Date.now()});// 创建一个FileReader实例// const reader = new FileReader();// reader.onload = function(event) {//   // event.target.result包含了文件的Data URL（Base64编码的字符串）//   const base64String = event.target.result;//   // 你可以在这里使用base64String，例如将其显示在页面上或发送到服务器//   console.log('封面base64',base64String);// };// reader.readAsDataURL(file);console.log('封面文件:',file)let fm = await FileApi.uploadFileByFile(file) // TODO改成自己的方法console.log('上传封面结果',fm)data['image'] = fm.data} catch (error) {console.error('处理失败:', error);}}console.log('submit..' ,data,files)// 发布文章DiscoverApi.publishDiscover(data).then(res=>{console.log('发布结果',res)if(res.code == 0){uni.showToast({title:'发布成功',icon:'success'})setTimeout(()=>{title.value = ('')content.value = ('')// filefileList.value = ([])uni.navigateBack()},1000)}})}

yudao自带的上传js（修改版）

import { baseUrl, apiPath, tenantId } from '@/sheep/config';
import request from '@/sheep/request';const FileApi = {// 上传文件uploadFile: (file) => {// TODO 芋艿：访问令牌的接入；const token = uni.getStorageSync('token');uni.showLoading({title: '上传中',});return new Promise((resolve, reject) => {uni.uploadFile({url: baseUrl + apiPath + '/infra/file/upload',filePath: file,name: 'file',header: {// Accept: 'text/json',Accept: '*/*','tenant-id': tenantId,// Authorization:  'Bearer test247',},success: (uploadFileRes) => {let result = JSON.parse(uploadFileRes.data);if (result.error === 1) {uni.showToast({icon: 'none',title: result.msg,});} else {return resolve(result);}},fail: (error) => {console.log('上传失败：', error);return resolve(false);},complete: () => {uni.hideLoading();},});});},uploadFileByFile: (file) => { // !!!!就是这个方法加一下// TODO 芋艿：访问令牌的接入；const token = uni.getStorageSync('token');uni.showLoading({title: '上传中',});return new Promise((resolve, reject) => {uni.uploadFile({url: baseUrl + apiPath + '/infra/file/upload',formData: {'file':file},name: 'file',header: {// Accept: 'text/json',Accept: '*/*','tenant-id': tenantId,// Authorization:  'Bearer test247',},success: (uploadFileRes) => {let result = JSON.parse(uploadFileRes.data);if (result.error === 1) {uni.showToast({icon: 'none',title: result.msg,});} else {return resolve(result);}},fail: (error) => {console.log('上传失败：', error);return resolve(false);},complete: () => {uni.hideLoading();},});});},// 获取文件预签名地址getFilePresignedUrl: (path) => {return request({url: '/infra/file/presigned-url',method: 'GET',params: {path,},});},// 创建文件createFile: (data) => {return request({url: '/infra/file/create', // 请求的 URLmethod: 'POST', // 请求方法data: data, // 要发送的数据});},
};export default FileApi;