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

在这里插入图片描述

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

文档地址 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)},// 新增图片 afterReadasync 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.mzph.cn/news/105361.shtml

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

相关文章

Elasticsearch集群管理原理

Elasticsearch 是一个开源的、基于 Lucene 的分布式搜索和分析引擎&#xff0c;设计用于云计算环境中&#xff0c;能够实现实时的、可扩展的搜索、分析和探索全文和结构化数据。它具有高度的可扩展性&#xff0c;可以在短时间内搜索和分析大量数据。 Elasticsearch 不仅仅是一个…

算法练习13——跳跃游戏II

LeetCode 45 跳跃游戏 II 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回…

【漏洞复现】安全云平台存在任意文件下载getshell

漏洞描述 深圳市强鸿电子有限公司鸿运主动安全云平台存在任意文件下载漏洞,攻击者可通过此漏洞下载敏感文件信息。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、荣誉和利益,未经授权…

el-table合计行合并

效果如下 因为合计el-table的合并方法是不生效的,所以需要修改css下手 watch: {// 应急物资的合计合并planData: {immediate: true,handler() {setTimeout(() > {const tds document.querySelectorAll(".pro_table .el-table__footer-wrapper tr>td");tds[0]…

C++笔记之std::future的用法

C笔记之std::future的用法 code review! 文章目录 C笔记之std::future的用法1.C中std::future和std::async总是一起出现吗&#xff1f;2.主要特点和用法3.一个完整的例子4.std::future 存放的是一个结果吗&#xff1f;5.cppreference——std::future 1.C中std::future和std::a…

数据分析基础:数据可视化+数据分析报告

数据分析是指通过对大量数据进行收集、整理、处理和分析&#xff0c;以发现其中的模式、趋势和关联&#xff0c;并从中提取有价值的信息和知识。 数据可视化和数据分析报告是数据分析过程中非常重要的两个环节&#xff0c;它们帮助将数据转化为易于理解和传达的形式&#xff0…

C++ - git 命令行

为什么要有 git 你很可能遇到过这种情况&#xff0c;在写项目的时候&#xff0c;要我不符合 leader 的要求&#xff0c;因而修改了很多个版本&#xff0c;但是修改到最后一版的时候&#xff0c;leader 有觉得当前这版还没有之前 某一版好&#xff0c;现在又要求你在 之前的那一…

OJ项目——用户的登录拦截,我是如何实现的?

目录 前言 1、关于Session该如何处理 简单session回顾&#xff1a; 回顾session的setAttribute、getAttribute : 项目中如何做&#xff1f; 2、登陆拦截器实现 自定义拦截器&#xff1a; 自定义拦截&#xff1a; 前言 博主之前也有出过一期关于拦截器的&#xff0c;大…

Zabbix监控系统详解2:基于Proxy分布式实现Web应用监控及Zabbix 高可用集群的搭建

文章目录 1. zabbix-proxy的分布式监控的概述1.1 分布式监控的主要作用1.2 监控数据流向1.3 构成组件1.3.1 zabbix-server1.3.2 Database1.3.3 zabbix-proxy1.3.4 zabbix-agent1.3.5 web 界面 2. 部署zabbix代理服务器2.1 前置准备2.2 配置 zabbix 的下载源&#xff0c;安装 za…

零代码编程:用ChatGPT批量采集bookroo网页上的英文书目列表

bookroo网页上有很多不错的英文图书书目。比如这个关于儿童花样滑冰的书单&#xff1a; https://bookroo.com/explore/books/topics/ice-skating 怎么批量下载下来呢&#xff1f; 这个网页是动态网页&#xff0c;要爬取下来比较麻烦&#xff0c;可以先查看源代码&#xff0c;…

Golang中gRPC使用及原理探究

文章目录 概述gRPC的优势&#xff1a; 1、gRPC入门1.1 protobuf安装1.2 使用gRPC1.2.1 定义proto文件1.2.2 编译proto文件1.2.3 编写客户端和服务端代码 2、gRPC的通信模式2.1 一元RPC模式2.2 客户端流RPC模式2.3 服务端流RPC模式2.4双向流RPC模式 3、 gRPC的底层原理探究3.1 H…

P1433 吃奶酪

#include <iostream> #include <cmath> using namespace std; #define M 15 #define S(n) ((n) * (n)) double indx[M 5], indy[M 5], ans 0, sum 0;//坐标数组&#xff0c;从下标为1开始记录 int n, vis[M 5] { 0 };//vis数组&#xff0c;选过的数字标记为1…

关于pytorch不区分行向量与列向量的理解

听李沐老师讲深度学习时候解释pytorch不区分行向量和列向量&#xff0c;只相当于是一维数组&#xff0c;一维张量一定是行向量&#xff0c;相当于数组&#xff0c;而行列向量可以放到矩阵中看。 测试如下&#xff1a; rtorch.tensor([1,2,3],dtypetorch.float32) print(r,r.T…

滑动窗口算法(C语言描述)

第一种类型&#xff1a;不固定长窗口 问题1&#xff1a;*** C代码1&#xff1a; #include<stdio.h> #include<string.h> #define N 5int min_len(int len1,int len2) {return (len1 < len2 ? len1:len2); }int main() {int target 0;int num[N];scanf("…

C语言中的文件操作指南

阅读导航 前言一、文件类型1. 程序文件2. 数据文件PS.文件名 二、文件的打开和关闭1. 文件指针2. 文件的打开和关闭 三、文件的顺序读写四、文件的随机读写1. fseek() 函数2. ftell() 函数3. rewind() 函数 总结 前言 在C语言中&#xff0c;文件操作是一项重要的任务。通过文件…

阿里云在云原生领域喜获多项 OSCAR 开源尖峰案例奖

当前&#xff0c;国内开源技术正逐渐在各领域落地&#xff0c;越来越多的企业已经或准备使用开源&#xff0c;优秀的开源案例可以起到领航和参考作用。为了更好地推动开源技术在中国市场的落地&#xff0c;鼓励企业和厂商使用开源&#xff0c;鼓励企业或个人进一步探索我国开源…

矩阵系统能做什么

矩阵系统可以应用于许多领域&#xff0c;包括但不限于以下方面&#xff1a; 1. 工程领域&#xff1a;在工程项目中&#xff0c;矩阵系统可用于设计和优化结构、系统、网络、电路、热管理等。例如&#xff0c;矩阵系统可以用来分析和预测系统的稳定性、可靠性、响应时间、能耗等…

2023年中国分布式光纤传感产量、需求量及行业市场规模分析[图]

分布式光纤传感器中的光纤能够集传感、传输功能于一体&#xff0c;能够完成在整条光纤长度上环境参量的空间、时间多维连续测量&#xff0c;具有结构简单、易于布设、性价比高、易实现长距离等独特优点&#xff0c;常用的分布式光纤传感器有光时域反射仪、布里渊分析仪、喇曼反…

Outlook导入导出功能灰色,怎么解决

下载安装 Outlook 软件后&#xff0c;登陆账号&#xff0c;然后选择“文件” - “导出”&#xff0c;结果发现“导出”按钮是灰色的&#xff0c;根本无法导出。根据官方说法&#xff1a;由于配置没有完成或者office产品没有正确激活。outlook导出键为灰色原因由于配置没有完成或…

基于nodejs+vue教学辅助管理系统

学生&#xff1b;首页、个人中心、本课程设计了线上教学辅助系统 ,学生可以此系统实现在线学习&#xff0c;作业提交管理、作业成绩管理。随着社会的快速发展&#xff0c;计算机的影响是全面且深入的。教师&#xff1a;首页、个人中心、课程信息管理、教学资料管理、作业信息管…