uniapp 一次性上传多条视频 u-upload accept=“video“ uni.chooseMedia uni.uploadFile

news2024/10/2 8:39:12

在这里插入图片描述

方式 一 部分安卓机 只能一条一条传视频

文档地址 uview 2.0 Upload 上传组件
html

<view class="formupload">
	<u-upload 
	accept="video"
	:fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
		:maxCount="9"></u-upload>
</view>

script

	// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片 afterRead
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(event.name,lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(num,url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseUrl + 'upload', // 上传图片视频的接口名
						filePath: url,
						name: 'file',
						header: {},
						formData: {
							file: url
						},
						success: (res) => {
							res.data = JSON.parse(res.data)
							if (res.data.code == 0) {
								setTimeout(() => {
									resolve(res.data.url)
								}, 1000)
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
								this[`fileList${num}`].pop()
								return
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
							reject(error)
						}
					});
				})
			},

方式 二 可以一次性上传多条视频

文档地址 video
uni.chooseMedia
uni.uploadFile

html

	<view class="u-flex wrap">
		<image src="@/static/image/up.png" mode="" class="u-w-160 u-h-160 u-m-r-16 u-m-b-16" 
		@click="upvideoFun" v-if="fileList3.length < 9"></image>
	<view class="vibox" v-for="(item,i) in fileList3" :key="i">
		<video :src="item.url" class="viimg"></video>
		<view class="vitext" @click="delFun(i)">  <text>x</text>  </view>	
	</view>
	</view>

script

	// 上传视频
		 upvideoFun(){
				let that = this;
				uni.chooseMedia({
				  count: 9,
				  mediaType: ['video'],
				  sourceType: ['album', 'camera'],
				  maxDuration: 30,
				  camera: 'back',
				  success(res) {
						let lists = [].concat(res.tempFiles);
						for (let i = 0; i < lists.length; i++) {
								uni.uploadFile({
									url: baseUrl + 'upload',
									filePath: lists[i].tempFilePath,
									name: 'file',
									formData: {},
									success: (resres) => {
										let data = JSON.parse(resres.data);
										that.fileList3.push({
											url:data.url
										});
									}
								});
						}
				  }
				});
			},
	
			// 删除视频
			delFun(i){
				this.fileList3.splice(i, 1);
			},

css

.vibox{
		width: 80px;
		height: 80px;
		position: relative;
		border-radius: 2px;
		margin: 0 8px 8px 0;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		.viimg{
			width: 80px;
			height: 80px;
		}
		.vitext{
			position: absolute;
			top: 0;
			right: 0;
			background-color: #373737;
			height: 14px;
			width: 14px;
			display: flex;
			border-bottom-left-radius: 100px;
			align-items: center;
			justify-content: center;
			z-index: 3;
			text{
				font-size: 10px;
				font-weight: normal;
				top: 0px;
				color: #ffffff;
				transform: translate(1px,-3px);
			}
		}
	}

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

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

相关文章

解锁远程联机模式:使用MCSM面板搭建我的世界服务器,并实现内网穿透公网访问

文章目录 前言1.Mcsmanager安装2.创建Minecraft服务器3.本地测试联机4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射内网端口 5.远程联机测试6. 配置固定远程联机端口地址6.1 保留一个固定TCP地址6.2 配置固定TCP地址 7. 使用固定公网地址远程联机 前言 MCSManager是一个…

动态资源平衡:主流虚拟化 DRS 机制分析与 SmartX 超融合的实现优化

资源的动态调度是虚拟化软件&#xff08;或超融合软件&#xff09;中的一项重要功能&#xff0c;主要指在虚拟化集群中&#xff0c;通过动态改变虚拟机的分布&#xff0c;达到优化集群可用性的目标。这一功能以 VMware vSphere 发布的 Distributed Resource Scheduler&#xff…

atoi函数及其模拟实现

这个函数的功能是将字符串转换为整形&#xff0c;那么具体是怎么样的呢 先看几个例子&#xff1a; 有一个转换为整形的最大值 刚开始就是非法字符 因此&#xff0c;我们模拟实现时&#xff0c;要考虑以上几种非法输入情况&#xff1a; 1.空字符串 2.空白字符 3.处理-号 4.过大…

C++算法:城市天际线问题

题目 城市的 天际线 是从远处观看该城市中所有建筑物形成的轮廓的外部轮廓。给你所有建筑物的位置和高度&#xff0c;请返回 由这些建筑物形成的 天际线 。 每个建筑物的几何信息由数组 buildings 表示&#xff0c;其中三元组 buildings[i] [lefti, righti, heighti] 表示&am…

【无标题】SpringMVC之WEB-INF下页面跳转@ModelAttributeIDEA tomcat控制台中文乱码问题处理

WEB-INF下页面跳转 ModelAttribute来注解非请求处理方法 用途&#xff1a;预加载数据&#xff0c;会在每个RequestMapping方法执行之前调用。 特点&#xff1a;无需返回视图&#xff0c;返回类型void IDEA tomcat控制台中文乱码问题处理 复制此段代码&#xff1a;-Dfile.e…

快速生成美观的二维码:专家级教程

首先&#xff0c;我们需要选择一个适合在线海报制作工具&#xff0c;比如乔拓云。乔拓云是一个非常流行的在线海报制作工具&#xff0c;它提供了大量的模板和编辑工具&#xff0c;让你可以轻松地制作出一张精美的Logo。 接下来&#xff0c;我们需要在乔拓云网站上注册并登录。在…

【运维笔记】VMWare 另一个程序已锁定文件的一部分,进程无法访问

情景再现 这里使用的是VMware 17 解决办法 进入设置 点击选项&#xff0c;全选复制里面内容 进入文件夹&#xff0c;删除所有包含.lck后缀的文件和文件夹 再启动虚拟机即可

关键词搜索快手商品列表数据,快手商品列表数据接口,快手API接口

在网页抓取方面&#xff0c;可以使用 Python、Java 等编程语言编写程序&#xff0c;通过模拟 HTTP 请求&#xff0c;获取快手网站上的商品页面。在数据提取方面&#xff0c;可以使用正则表达式、XPath 等方式从 HTML 代码中提取出有用的信息。值得注意的是&#xff0c;快手网站…

多目标水母搜索算法(Multi-Objective Jellyfish Search algorithm,MOJS)求解微电网优化--提供MATLAB代码

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、多目标水母搜索算法MOJS …

@Mapper与@MapperScan注解

Mapper Mapper Mapper.xml文件 作用在dao&#xff08;mapper&#xff09;层上的一个注解&#xff0c;将接口生成一个动态代理类&#xff0c;有了这个注解就不用 再写Mapper.xml文件 如果缺少这个注解&#xff0c;运行项目就会报相应的错误 Field userMapper in com.example…

docker入门加实战—docker数据卷

docker入门加实战—docker数据卷 容器是隔离环境&#xff0c;容器内程序的文件、配置等都在容器的内部&#xff0c;要读写容器内的文件非常不方便。 因此&#xff0c;容器提供程序的运行环境&#xff0c;但是程序运行产生的数据、程序运行依赖的配置都应该与容器进行解耦。 …

dpdk/spdk/网络协议栈/存储/网关开发/网络安全/虚拟化/ 0vS/TRex/dpvs技术专家成长体系教程

课程围绕安全&#xff0c;网络&#xff0c;存储&#xff0c;云原生4个维度去讲解核心技术点。 6个专栏组成&#xff1a;dpdk网络专栏、存储技术专栏、安全与网关开发专栏、虚拟化与云原生专栏、测试工具专栏、性能测试专栏 一、dpdk网络 dpdk基础知识 多队列网卡&#xff0…

es6(三)—— set(集合) 和map的使用

ES6的系列文章目录 第一章 Python 机器学习入门之pandas的使用 文章目录 ES6的系列文章目录一、set&#xff08;集合&#xff09;0. 定义1. 基本使用2.常用方法&#xff08;1&#xff09;代码&#xff08;2&#xff09;效果&#xff08;3&#xff09;遍历 二、map0. 定义1. 基…

利用Python分析金融交易中的滚动Z值

大家好&#xff0c;在不断演变的证券交易领域&#xff0c;能够利用数据和统计学的力量提供重要的优势。无论是预测未来价格、分析市场趋势&#xff0c;还是简单地评估特定证券的波动性&#xff0c;数据驱动的见解已经改变了交易者对证券市场的处理方式。这就是Z值的用途&#x…

miRNA测序数据生信分析——第四讲,未知物种的生信分析实例

miRNA测序数据生信分析——第四讲&#xff0c;未知物种的生信分析实例 miRNA测序数据生信分析——第四讲&#xff0c;未知物种的生信分析实例1. 下载测序数据2. 原始数据质控——软件fastqc3. 注释tRNA和rRNA&#xff0c;使用Rfam数据库——软件blast&#xff0c;Rfam_statisti…

网页制作工具都有哪些?推荐这几款

随着网络的快速发展&#xff0c;网站迅速崛起&#xff0c;成为无数网络冲浪玩家的首选&#xff0c;网页设计师也成为各大互联网公司竞争的热点。当设计师开始时&#xff0c;他们总是不知道如何选择网页制作工具。以下将列出市场上流行的网页制作工具。设计师可以根据自己的需要…

Leetcode刷题详解——复写零

1.题目链接&#xff1a;复写零 2.题目描述 给你⼀个⻓度固定的整数数组 arr &#xff0c;请你将该数组中出现的每个零都复写⼀遍&#xff0c;并将其余的元素 向右平移。 注意&#xff1a;请不要在超过该数组⻓度的位置写⼊元素。请对输⼊的数组就地进⾏上述修改&#xff0c;不…

SpringCould微服务保护01——Sentinel组件下载并使用

1.初识Sentinel 1.1.雪崩问题及解决方案 1.1.1.雪崩问题 微服务中&#xff0c;服务间调用关系错综复杂&#xff0c;一个微服务往往依赖于多个其它微服务。 如图&#xff0c;如果服务提供者I发生了故障&#xff0c;当前的应用的部分业务因为依赖于服务I&#xff0c;因此也会被…

小程序首页如何进行装修设置

小程序首页是展示给用户的第一屏&#xff0c;它的装修直接影响到用户对小程序的第一印象。小程序首页的设置在小程序管理员后台->页面设置->首页&#xff0c;下图是小程序首页默认的设置。 下图&#xff0c;是小程序首页的具体表现形式。下面具体解释小程序首页各个设置项…

Vue 绑定 class 与 style

在应用界面中&#xff0c;某些元素的样式是动态的。class 与 style 绑定就是专门用来实现动态样式效果的技术。 如果需要动态绑定 class 或 style 样式&#xff0c;可以使用 v-bind 绑定。 绑定 class 样式【字符串写法】 适用于&#xff1a;类名不确定&#xff0c;需要动态指…