uniapp vue3 上传视频组件封装

首先创建一个 components 文件在里面进行组件的创建 

下面是 vvideo组件的封装 也就是图片上传组件 只是我的命名是随便起的

<template><!-- 上传视频 --><view class="up-page"><!--视频--><view class="show-box" v-for="(item1, index1) in videoList" :key="index1"><video class="full" :src="item1"></video><view  class="delect-icon" @tap="delectVideo(index1)"><image class="full" :src="clearIcon" mode=""></image></view></view><view v-if="VideoOfImagesShow" @tap="chooseVideoImage" class="box-mode"><image class="full" :src="selectfile" mode=""></image></view></view></template><script setup>  
import { ref } from 'vue';  // 假设sourceType是一个外部定义或在其他地方已经处理的数组,这里我们直接使用  
// 如果它是动态的,你可能需要将其也转换为ref  
const sourceType = ref([['camera'], ['album'], ['camera', 'album']]);  // 创建响应式数据  
const clearIcon = ref('../../static/xxx.png');  
const selectfile = ref('../../static/jiahao.png');  
const VideoOfImagesShow = ref(true);  
const imageList = ref([]);  
const videoList = ref([]);  
const sourceTypeOptions = ref(['拍摄', '相册', '拍摄或相册']);  
const sourceTypeIndex = ref(2);  
const cameraList = ref([{  value: 'back',  name: '后置摄像头',  checked: 'true'  
}, {  value: 'front',  name: '前置摄像头'  
}]);  
const cameraIndex = ref(0);  
const maxCount = ref(9);  // 方法  
function chooseVideoImage() {  uni.showActionSheet({  title: '选择上传类型',  itemList: ['视频'], // 注意:这里我添加了'图片'选项,你可能需要调整你的逻辑来处理它  success: res => {  if (res.tapIndex === 0) {  chooseVideo();  } else if (res.tapIndex === 1) {  // 假设你有一个chooseImages方法来处理图片选择  // chooseImages();  console.log('选择图片');  }  }  });  
}  function chooseVideo() {  uni.chooseVideo({  maxDuration: 60,  count: maxCount.value,  camera: cameraList.value[cameraIndex.value].value,  sourceType: sourceType.value[sourceTypeIndex.value],  success: res => {  videoList.value = [...videoList.value, res.tempFilePath];  if (imageList.value.length + videoList.value.length === maxCount.value) {  VideoOfImagesShow.value = false;  }  console.log(videoList.value);  }  });  
}  function delectVideo(index) {  uni.showModal({  title: '提示',  content: '是否要删除此视频',  success: res => {  if (res.confirm) {  videoList.value.splice(index, 1);  VideoOfImagesShow.value = !(imageList.value.length + videoList.value.length >= maxCount.value);  }  }  });  
}  
</script><style lang="scss">/* 统一上传后显示的盒子宽高比 */.box-mode {width: 50vw;height: 60vw;border-radius: 8rpx;overflow: hidden;}.full {width: 100%;height: 100%;}.up-page {display: flex;flex-wrap: wrap;display: flex;width: 100%;.show-box:nth-child(3n){margin-right: 0;}.show-box {position: relative;margin-bottom:4vw;margin-right: 4vw;@extend .box-mode;.delect-icon {height: 40rpx;width: 40rpx;position: absolute;right: 0rpx;top: 0rpx;z-index: 1000;}}}</style>

直接在页面引用

	<view class="videobox"><view class="example-body"><!-- <uni-file-picker limit="9"  file-mediatype="video" title="最多选择9个视频"></uni-file-picker> --><div>选择视频-最多只能选择九个</div><vvideo></vvideo></view></view>

最终样子

 

 

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

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

相关文章

Nginx系列-3 servername优先级和location优先级和常用正则表达式

1.正则表达式和分组 由于Nginx配置文件中经常出现正则表达式&#xff0c;因此本章节专门对常见的正则表达式进行简单介绍。 [1] 开始与结束 ^表示匹配输入字符串的开始 $表示匹配输入字符串的结束[2] 匹配次数 ?表示匹配0次或者1次 表示匹配1次或多次 *表示匹配0从或多次…

Netty HTTPS服务端高并发宕机案例

读李林峰《netty进阶指南》于第18章有感。特此记录一下问题的现象&#xff0c;以及他是如何排障的&#xff0c;以此加深理解 目录标题 事件梳理排查事后分析如何解决总结 事件梳理 某系统内部两个模块之间采用 HTTPS 通信。 某天&#xff1a; 客户端某时间吞吐量为0&#xf…

数据集成的魔法工坊:SQL Server Integration Services使用指南

数据集成的魔法工坊&#xff1a;SQL Server Integration Services使用指南 在当今的数据驱动世界中&#xff0c;数据集成是企业获取洞察力和竞争优势的关键。SQL Server Integration Services&#xff08;SSIS&#xff09;是Microsoft提供的一套强大的数据集成工具&#xff0c…

海思arm-hisiv400-linux-gcc 交叉编译rsyslog 记录心得

需要编译rsyslog,参考海思3536平台上rsyslog交叉编译、使用-CSDN博客和rsyslog移植&#xff08;亲测成功&#xff09;_rsyslog交叉编译-CSDN博客 首先下载了要用到的一些库的源码&#xff0c;先交叉编译这些库 原来是在centos6上交叉编译的&#xff0c;结果编译时报缺少软件要…

MySQL练习02

题目 步骤 创建数据库 create database mydb8_worker; #创建数据库 use mydb8_worker; #使用数据库 创建表 create table t_worker( department_id int(11) not null comment 部门号, worker_id int(11) primary key not null comment 职工号, worker_date date not …

数据结构 - 栈(精简介绍)

文章目录 普通栈Stack用法Q 最长有效括号 单调栈Q 接雨水 普通栈 栈就是一个先进后出的结构 想象一个容器&#xff0c;往里面一层一层放东西&#xff0c;最早放进去的东西被压在下面&#xff08;所以放元素也叫压栈&#xff09;&#xff0c;要拿到这个最低层的东西需要先把上面…

【系统架构设计师】十三、软件可靠性(基本概念|软件可靠性建模)

目录 一、基本概念 1.1 定义 1.2 软件可靠性的定量描述 1.3 可靠性测试的意义 1.4 广义的软件可靠性测试和狭义的软件可靠性测试 二、软件可靠性建模 2.1 可靠性模型的组成 2.2 可靠性模型的共同假设 2.3 可靠性模型的重要特性 2.4 可靠性建模方法 往期推荐 历年真…

大型网站核心架构要素

文章目录 1 性能1.1 性能优化1.2 性能度量 2 可用性2.1 可用性指标2.2 可用性目标2.3 可用性方案2.4 可用性度量 3 伸缩性3.1 伸缩性度量3.2 伸缩性方案3.2.1 应用服务器集群3.2.2 缓存服务器集群3.2.3 关系数据库集群3.2.4 NoSQL数据库产品 4 扩展性4.1 扩展性度量4.2 扩展性方…

当Excel处理神器EasyExcel遇上Apache POI:一场关于依赖的趣味‘撞车’冒险

目录 前言 报错 解决思想 解决方案 结尾 前言 &#x1f388;&#x1f388;&#x1f388;"Hey there, 大家好&#xff01;我是Blue&#xff0c;今天可不是一般的‘代码奇遇记’&#xff01;我在与EasyExcel这位数据处理界的魔术师共舞时&#xff0c;突然遭遇了前所未…

Linux C++ 066-设计模式之访问者模式

Linux C 066-设计模式之访问者模式 本节关键字&#xff1a;Linux、C、设计模式、访问者模式 相关库函数&#xff1a; 概念 在访问者模式&#xff08;Visitor Pattern&#xff09;中&#xff0c;我们使用了一个访问者类&#xff0c;它改变了元素类的执行算法。通过这种方式&a…

Unity-URP-SSAO记录

勾选After Opacity Unity-URP管线&#xff0c;本来又一个“bug”, 网上查不到很多关于ssao的资料 以为会不会又是一个极度少人用的东西 而且几乎都是要第三方替代 也完全没有SSAO大概的消耗是多少&#xff0c;完全是黑盒(因为用的人少&#xff0c;研究的人少&#xff0c;优…

解决GoLand添加GOROOT提示The selected directory is not a valid home for Go Sdk的问题

现象 解决 在Go安装路径下找到zversion.go文件&#xff0c;我的在D:\Program Files\Go1.21.1\src\runtime\internal\sys下面 打开文件&#xff0c;添加如下内容&#xff1a; const TheVersion go1.21.1保存后再重新添加GOROOT即可

Python莫兰生死抑制放大进化图

&#x1f3af;要点 &#x1f3af;种群离散时间莫兰生死动态图解 | &#x1f3af;良好混合种群的固定概率 | &#x1f3af;数值求解生成埃尔多斯-雷尼图 | &#x1f3af;计算马尔可夫链的转移矩阵概率 | &#x1f3af;出生死亡动态和死亡出生动态概率无向随机图和有向随机图&am…

深度选择器探秘:/deep/、>>>、::v-deep 与 v-deep() 的区别与用法

在Vue.js项目中&#xff0c;尤其是在使用组件化开发时&#xff0c;我们时常需要修改组件内部的样式&#xff0c;但Vue的样式封装特性&#xff08;如<style scoped>&#xff09;会阻止外部样式直接作用于组件内部。为了应对这一挑战&#xff0c;Vue社区引入了深度选择器&a…

react Jsx基础概念和本质

什么是jsx jsx是JavaScript和XML(HTML)的缩写&#xff0c;表示在js代码中编写HTML模板结构&#xff0c;它是react中编写UI模板的方式 const message this is message function App(){return (<div><h1>this is title</h1>{message}</div>) } jsx优…

现代物理学概论

现代物理学概论 一、量子纠缠 1、量子力学的基础 波粒二象性&#xff1a;比原子还小的粒子&#xff0c;同时具有两种状态。这些粒子不仅像粒子&#xff0c;也像波。 叠加态&#xff1a;波粒二象性就是一种叠加态、还有自旋、偏振、位置和动量等其他物理性质的叠加态&#x…

Mike she中常出现的error及解决办法

前言&#xff1a; 最近用了下MIKE SHE坡面流模块&#xff0c;感觉一场雨降下来和MIKESHE和MIKE21模块算出来还是有不一样的地方&#xff0c;这个先不聊&#xff0c;聊点直接的&#xff0c;到底一个玩个模块遇到了哪些错误&#xff0c;我们来说说解决方法。 Error1&#xff1a;…

嵌入式人工智能(16-基于树莓派4B的电机控制-步进电机28BYJ-48)

1、步进电机 步进电机是一种旋转电机&#xff0c;通过在特定的步进角度内进行转动来实现精确的定位控制。步进电机通常由电磁线圈和磁轴组成&#xff0c;线圈通过电流激励产生磁场&#xff0c;而磁轴则受到线圈所产生的磁场的作用而转动。 步进电机的运动是离散的&#xff0c;…

el-select选择器修改背景颜色

<!--* FilePath: topSearch.vue* Author: 是十九呐* Date: 2024-07-18 09:46:03* LastEditTime: 2024-07-18 10:42:03 --> <template><div class"topSearch-container"><div class"search-item"><div class"item-name&quo…

野兔在线工具箱系统全新升级改版,基于TP8和yetuadmin后台实现

野兔在线工具箱系统全新升级改版&#xff0c;基于TP8和yetuadmin后台实现 系统名称&#xff1a;野兔在线工具系统 系统语言&#xff1a;支持多语言&#xff0c;大概有20种 系统源码&#xff1a;不加密&#xff0c;开源 系统开发&#xff1a;PHPMySQL (基于thinkphp8&#x…