uniapp 上传视频到阿里云之后回显视频获取视频封面

news2025/6/27 8:19:16

uniapp 上传视频到阿里云之后回显视频获取视频封面


官网的解决方案

1.initial-time Number 指定视频初始播放位置,单位为秒(s)。 没什么卵用
2.使用 uni.createVideoContext(“myVideo”, this).seek(number)。 没什么卵用

<video :id="myVideo"></video>
this.videoContext = uni.createVideoContext("myVideo", this)
this.videoContext.seek(1)

正确的解决方法

t_1000 等于截取视频第 1秒作为封面

<video class="preview-file" :src="item1"  :poster="item1 +'?x-oss-process=video/snapshot,t_1000,f_jpg'"></video>

完整代码

 <template>
 	<!-- 上传start -->
 	<view style="display: flex; flex-wrap: wrap;">
 		<view class="update-file">
 			<!--图片-->
 			<view v-for="(item,index) in imageList" :key="index">
 				<view class="upload-box">
 					<image class="preview-file" :src="item" @tap="previewImage(item)"></image>
 					<view class="remove-icon" @tap="delect(index)">
 						<u-icon name="trash" class="icon-delete"></u-icon>
 					</view>
 				</view>
 			</view>

 			<!--视频-->
 			<view v-for="(item1, index1) in srcVideo" :key="index1">
 				<view class="upload-box">
 					<video class="preview-file" :src="item1" muted :poster="item1 +'?x-oss-process=video/snapshot,t_1000,f_jpg'"></video>
 					<view class="remove-icon" @tap="delectVideo(index1)">
 						<u-icon name="trash" class="icon-delete"></u-icon>
 					</view>
 				</view>
 			</view>

 			<!--按钮-->
 			<view v-if="VideoOfImagesShow" @tap="chooseVideoImage" class="upload-btn">
 				<view class="btn-text">上传</view>
 			</view>
 		</view>
 	</view>
 	<!-- 上传 end -->
 </template>
 <script>
 	import {
 		deleteFileApi
 	} from '../../api/file/deleteOssFile';
 	var sourceType = [
 		['camera'],
 		['album'],
 		['camera', 'album']
 	];
 	export default {
 		data() {
 			return {
 				hostUrl: "你的图片上传接口地址  如:http://192.168.163.30:9999/api/fileUpload",
 				// 上传图片视频
 				VideoOfImagesShow: true, // 页面图片或视频数量超出后,拍照按钮隐藏
 				imageList: [], //存放图片的地址
 				srcVideo: [], //视频存放的地址
 				sourceType: ['拍摄', '相册', '拍摄或相册'],
 				sourceTypeIndex: 2,
 				cameraList: [{
 					value: 'back',
 					name: '后置摄像头',
 					checked: 'true'
 				}, {
 					value: 'front',
 					name: '前置摄像头'
 				}],
 				cameraIndex: 0, //上传视频时的数量
 				//上传图片和视频
 				uploadFiles: [],
 			}
 		},
 		onUnload() {
 			// 上传
 			this.imageList = [];
 			this.sourceTypeIndex = 2;
 			this.sourceType = ['拍摄', '相册', '拍摄或相册'];
 		},

 		methods: {
 			//点击上传图片或视频
 			chooseVideoImage() {
 				uni.showActionSheet({
 					title: '选择上传类型',
 					itemList: ['图片', '视频'],
 					success: res => {
 						if (res.tapIndex == 0) {
 							this.chooseImages();
 						} else {
 							this.chooseVideo();
 						}
 					}
 				});
 			},
 			//上传图片
 			chooseImages() {
 				uni.chooseImage({
 					count: 9, //默认是9张
 					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
 					sourceType: ['album', 'camera'], //从相册选择
 					success: res => {
 						console.log(res, 'ddddsss')
 						let imgFile = res.tempFilePaths;

 						imgFile.forEach(item => {
 							uni.uploadFile({
 								url: this.hostUrl, //仅为示例,非真实的接口地址
 								method: "POST",
 								header: {
 									token: uni.getStorageSync('localtoken')
 								},
 								filePath: item,
 								name: 'file',
 								success: (result) => {
 									let res = JSON.parse(result.data)
 									console.log('打印res:', res)
 									if (res.code == 200) {
 										this.imageList = this.imageList.concat(res.data);
 										console.log(this.imageList, '上传图片成功')

 										if (this.imageList.length >= 9) {
 											this.VideoOfImagesShow = false;
 										} else {
 											this.VideoOfImagesShow = true;
 										}
 									}
 									uni.showToast({
 										title: res.msg,
 										icon: 'none'
 									})

 								}
 							})
 						})

 					}
 				})
 			},

 			//上传视频
 			chooseVideo(index) {
 				uni.chooseVideo({
 					maxDuration: 120, //拍摄视频最长拍摄时间,单位秒。最长支持 60 秒
 					count: 9,
 					camera: this.cameraList[this.cameraIndex].value, //'front'、'back',默认'back'
 					sourceType: sourceType[this.sourceTypeIndex],
 					success: res => {
 						let videoFile = res.tempFilePath;

 						uni.showLoading({
 							title: '上传中...'
 						});
 						uni.uploadFile({
 							url: this.hostUrl, //上传文件接口地址
 							method: "POST",
 							header: {
 								token: uni.getStorageSync('localtoken')
 							},
 							filePath: videoFile,
 							name: 'file',
 							success: (result) => {
 								uni.hideLoading();
 								let res = JSON.parse(result.data)
 								if (res.code == 200) {
 									console.log(res);
 									this.srcVideo = this.srcVideo.concat(res.data);
 									if (this.srcVideo.length == 9) {
 										this.VideoOfImagesShow = false;
 									}
 								}
 								uni.showToast({
 									title: res.msg,
 									icon: 'none'
 								})

 							},
 							fail: (error) => {
 								uni.hideLoading();
 								uni.showToast({
 									title: error,
 									icon: 'none'
 								})
 							}
 						})
 					},
 					fail: (error) => {
 						uni.hideLoading();
 						uni.showToast({
 							title: error,
 							icon: 'none'
 						})
 					}
 				})
 			},

 			//预览图片
 			previewImage: function(item) {
 				console.log('预览图片', item)
 				uni.previewImage({
 					current: item,
 					urls: this.imageList
 				});
 			},

 			// 删除图片
 			delect(index) {
 				uni.showModal({
 					title: '提示',
 					content: '是否要删除该图片',
 					success: res => {
 						if (res.confirm) {
 							deleteFileApi(this.imageList[index].split("/")[3]);
 							this.imageList.splice(index, 1);
 						}
 						if (this.imageList.length == 4) {
 							this.VideoOfImagesShow = false;
 						} else {
 							this.VideoOfImagesShow = true;
 						}
 					}
 				});
 			},
 			// 删除视频
 			delectVideo(index) {
 				uni.showModal({
 					title: '提示',
 					content: '是否要删除此视频',
 					success: res => {
 						if (res.confirm) {
 							console.log(index);
 							console.log(this.srcVideo[index]);
 							deleteFileApi(this.srcVideo[index].split("/")[3]);
 							this.srcVideo.splice(index, 1);
 						}
 						if (this.srcVideo.length == 4) {
 							this.VideoOfImagesShow = false;
 						} else {
 							this.VideoOfImagesShow = true;
 						}
 					}
 				});
 			},
 			// 上传 end
 		}
 	}
 </script>

 <style scoped lang="scss">
	 .icon-delete {
		 z-index: 99999 !important;
	 }
 	// 上传
 	.update-file {
 		margin-left: 10rpx;
 		height: auto;
 		display: flex;
 		justify-content: space-between;
 		flex-wrap: wrap;
 		margin-bottom: 5rpx;

 		.del-icon {
 			width: 44rpx;
 			height: 44rpx;
 			position: absolute;
 			right: 10rpx;
 			top: 12rpx;
 		}

 		.btn-text {
 			color: #606266;
 		}

 		.preview-file {
 			width: 200rpx;
 			height: 180rpx;
 			border: 1px solid #e0e0e0;
 			border-radius: 10rpx;
 		}

 		.upload-box {
 			position: relative;
 			width: 200rpx;
 			height: 180rpx;
 			margin: 0 20rpx 20rpx 0;

 		}

 		.remove-icon {
 			position: absolute;
 			right: -10rpx;
 			top: -10rpx;
 			z-index: 1000;
 			width: 30rpx;
 			height: 30rpx;
 		}

 		.upload-btn {
 			width: 200rpx;
 			height: 180rpx;
 			border-radius: 10rpx;
 			background-color: #f4f5f6;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 		}
 	}

 	.guide-view {
 		margin-top: 30rpx;
 		display: flex;

 		.guide-text {
 			display: flex;
 			flex-direction: column;
 			justify-content: space-between;
 			padding-left: 20rpx;

 			.guide-text-price {
 				padding-bottom: 10rpx;
 				color: #ff0000;
 				font-weight: bold;
 			}
 		}
 	}

 	.service-process {
 		background-color: #ffffff;
 		padding: 20rpx;
 		padding-top: 30rpx;
 		margin-top: 30rpx;
 		border-radius: 10rpx;
 		padding-bottom: 30rpx;

 		.title {
 			text-align: center;
 			margin-bottom: 20rpx;
 		}
 	}

 	.form-view-parent {
 		border-radius: 20rpx;
 		background-color: #FFFFFF;
 		padding: 0rpx 20rpx;

 		.form-view {
 			background-color: #FFFFFF;
 			margin-top: 20rpx;
 		}

 		.form-view-textarea {
 			margin-top: 20rpx;
 			padding: 20rpx 0rpx;

 			.upload-hint {
 				margin-top: 10rpx;
 				margin-bottom: 10rpx;
 			}
 		}
 	}


 	.bottom-class {
 		margin-bottom: 60rpx;
 	}

 	.bottom-btn-class {
 		padding-bottom: 1%;

 		.bottom-hint {
 			display: flex;
 			justify-content: center;
 			padding-bottom: 20rpx;

 		}
 	}
 </style>

最终效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1583973.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

zabbix企业级监控平台

zabbix部署 安装源 重新创建纯净环境&#xff0c;利用base克隆一台虚拟机server1 给server1做快照&#xff0c;方便下次实验恢复使用 进入zabbix官网https://www.zabbix.com rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm …

Idea集成Docker的快捷部署

Idea集成Docker的快捷部署 配置Docker远程访问1.1 修改 `/lib/systemd/system/docker.service`1.2 替换`ExecStart`1.3 重启docker服务1.4 监听端口是否被占用1.5 服务器防火墙开启2375端口1.6 测试配置IDEA2.1 下载docker插件2.2 添加docker连接2.3 配置容器镜像加速器2.4 配置…

SQL注入sqli_labs靶场第二题

解题思路与第一题相同 ?id1 and 11 和?id1 and 12进行测试如果11页面显示正常和原页面一样&#xff0c;并且12页面报错或者页面部分数据显示不正常&#xff0c;那么可以确定此处为数字型注入。 联合查询&#xff1a; 猜解列名数量&#xff1a;3 ?id1 order by 4 判断回显…

南京航空航天大学-考研科目-513测试技术综合 高分整理内容资料-01-单片机原理及应用分层教程-单片机有关常识部分

系列文章目录 高分整理内容资料-01-单片机原理及应用分层教程-单片机有关常识部分 文章目录 系列文章目录前言总结 前言 单片机的基础内容繁杂&#xff0c;有很多同学基础不是很好&#xff0c;对一些细节也没有很好的把握。非常推荐大家去学习一下b站上的哈工大 单片机原理及…

【STL】list

目录 1. list的使用 1.1 list的构造 1.2 list iterator的使用 1.3 list capacity 1.4 list element access 1.5 list modifiers 1.6 list的迭代器失效 2. list的模拟实现 3. list与vector的对比 1. list的使用 1.1 list的构造 1.2 list iterator的使用 1. begin与end为…

性能优化原则

相关链接&#xff1a;【运行环境】加载资源的形式 性能优化 1 性能优化原则 多使用内存、缓存或其他方法 减少CPU计算量&#xff0c;减少网络加载耗时 &#xff08;适用于所有编程的性能优化----空间换时间&#xff09; 2 从何入手 性能优化-让加载更快 减少资源体积&#x…

java程序生成exe文件启动时,在没有java环境计算机运行

1.idea项目配置工件 2. 开始构建java程序成jar包 3. 生成exe启动程序 注&#xff1a;下面的输入框中写错了&#xff0c;应该是.\jre才对 4. 在已经选择的生成exe存放文件夹找到已经生成exe启动程序

你不可不知的5款小众神器

Hey小伙伴们&#x1f44b;&#xff0c;是不是还在为工作中的效率不高而烦恼呢&#xff1f;别急&#xff0c;今天我就给大家安利5款超实用的国产小众工作效软件&#xff0c;让你的工作台效率翻倍&#xff0c;轻松应对各种工作挑战&#xff01;&#x1f31f; 1️⃣ 亿可达 ycoda…

nexus搭建maven与docker镜像的私有仓库

引言 通过nexus搭建maven与docker镜像的私有仓库,实现jar包与镜像动态更新、共享、存储。 一、nexus部署 通过docker-compose部署nexus name: java services:#############################环境#############################env-nexus:restart: always## 3.58.1image: so…

Linux CPU利用率

Linux CPU利用率 在线上服务器观察线上服务运行状态的时候&#xff0c;绝大多数人都是喜欢先用 top 命令看看当前系统的整体 cpu 利用率。例如&#xff0c;随手拿来的一台机器&#xff0c;top 命令显示的利用率信息如下 这个输出结果说简单也简单&#xff0c;说复杂也不是那么…

技术解析:应对国内大流量攻击的新挑战与分布式清洗防御策略

近日&#xff0c;国内网络环境中出现的大流量攻击事件频发&#xff0c;且攻击规模呈指数级增长&#xff0c;部分攻击流量甚至超过了1.5Tbps。 这背后的主要原因是攻击者利用海外流量资源&#xff0c;通过复杂的网络技术和协议转换&#xff0c;将国际IPv4/IPv6流量巧妙伪装并转…

4.1Python的流程控制语句之分支语句

流程控制语句是计算机编程中用于控制程序执行流程的语句。它们允许根据条件来控制代码的执行顺序和逻辑&#xff0c;从而使程序能够根据不同的情况做出不同的决策。流程控制实现了更复杂和灵活的编程逻辑。 顺序语句 顺序语句是按照编写的顺序依次执行程序中的代码。代码会按照…

【测试开发学习历程】python迭代、可迭代对象、迭代器、生成器

1 迭代Iteration 迭代Iteration&#xff1a;所谓迭代就是重复运行一段代码语句块的能力&#xff0c;就好比在一个容器中进行一层一层遍历数据&#xff0c;在应用过程中for循环最为突出。迭代就是从某个容器对象中逐个地读取元素&#xff0c;直到容器中没有元素为止。迭代迭代&…

利用强化学习训练“井字棋”下棋策略的详细介绍

文章目录 1. 引言2. 基本要素2.1 棋盘状态2.2 智能体&#xff08;棋手&#xff09;2.3 用户交互接口 3. 训练过程3.1 模拟对弈过程3.2 策略的训练及检验3.3 用户实践 本篇文章的强化学习例子的完整代码来自刘建平老师的Github仓库。 1. 引言 井字棋游戏&#xff08;Tic-Tac-T…

GitLab教程(一):安装Git、配置SSH公钥

文章目录 序一、Git安装与基本配置&#xff08;Windows&#xff09;下载卸载安装基本配置 二、SSH密钥配置 序 为什么要使用代码版本管理工具&#xff1a; 最近笔者确实因为未使用代码版本管理工具遇到了一些愚蠢的问题&#xff0c;笔者因此认为代码版本管理工具对于提高团队…

每日Bug汇总--Day03

Bug汇总—Day03 一、项目运行报错 二、项目运行Bug 1、问题描述&#xff1a;Vue前端项目运行后台管理平台订单管理页面下的三个子页面出现点击不同的路由还是会出现相同的页面&#xff0c;导致页面和数据不匹配 解决办法&#xff1a; 在监听器中添加状态来根据路由地址变化…

2024地平线古月居核心开发者招募

2024地平线&古月居核心开发者招募 机器人&#xff0c;作为一个集成了多学科技术的复杂系统&#xff0c;其开发过程充满了挑战。为了帮助开发者们更好地克服这些挑战&#xff0c;提升项目的开发效率和质量&#xff0c;我们特别推出了[2024地平线&古月居核心开发者招募]…

【Gem5】获取构建教程

gem5-tutorial-hpca-2023 1 介绍 1.1 Gem5是什么1.2 Gem5可以用来做什么1.3 获取并构建gem5 gem5-tutorial-hpca-2023 打开网址&#xff1a; github 创建教程代码空空间 “Code” -> “Codespaces” -> “Create Codespace on master” GitHub Codespaces 是一个由…

DSP笔记6-C2000的中断机制

中断Interrupt&#xff1a; 单核CPU顺序执行程序 中断源&#xff0c;引起计算机中断的时间&#xff0c;解放cpu&#xff0c;提高效率。 三个等级&#xff1a;CPU中断&#xff0c;PIE中断&#xff0c;外设中断 cpu定时器&#xff0c;EPWM&#xff0c;ADC&#xff0c;eCAP&…

git bash用法-批量修改文件名

在win系统上安装git bash可以使用命令行模式操作&#xff0c;比较方便 1.原始文件名 2.代码 for file in *3utr*; do mv "$file" "$(echo "$file" | sed s/3utr/5utr/)"; done3.修改后的文件名