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 返回…

[Python进阶] 操纵鼠标:pyuserinput

6.2 操纵鼠标&#xff1a;pyuserinput 6.2.1 说明 在安装pyuserinput库时会自动安装PyMouse和PyKeyboard库。前者主要用来操作鼠标&#xff0c;包括鼠标的点击、移动等。后者主要用来操作键盘&#xff0c;包括键盘按键的按下、弹起等。 这两个库还可以同时对鼠标和键盘的事件…

idea一些不太常用但是能提升编码效率的快捷键

Ctrl Shift V&#xff1a;从历史选择粘贴 从历史剪粘版中选择要粘贴的内容。Ctrl Shift Z&#xff1a;重做 恢复上一步撤销内容Shift F4&#xff1a;在新窗口中打开 比如要从另一个类中复制代码 可以把这个类在新窗口单独打开 用AltTab 来回切换复制Ctrl PageUp&#xff…

前端、后端开发者常用到的免费API整理

以下是我整理的前端、后端工程师在开发中经常使用到的API接口&#xff0c;希望能帮到大家~ 手机号码归属地&#xff1a;可根据手机号码查询其省市区、运营商区号行政区划代码等信息。 上亿条数据囊括最新的170、166、147等号段&#xff0c;更新及时、准确度高。空号检测&#…

应变能力差怎么办?如何提高应变能力?

应变能力说的是人的反应能力&#xff0c;尤其是当环境&#xff0c;或者是事物在发生变化&#xff0c;如何做出快速反应&#xff0c;并且尽量确保这个反应是适当的&#xff0c;是最优的。这个反应有可能是本能反应&#xff0c;也有可能是基于快速思考后得出的。 良好的应变能力…

【漏洞复现】安全云平台存在任意文件下载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]…

MATLAB算法实战应用案例精讲-【图像处理】机器视觉(补充篇)

目录 前言 知识储备 嵌入式视觉系统 嵌入式视觉系统的构建模块 设备接口 图像处理链

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;现在又要求你在 之前的那一…

KWin、libdrm、DRM从上到下全过程 —— drmModeAddFBxxx(8)

接前一篇文章:KWin、libdrm、DRM从上到下全过程 —— drmModeAddFBxxx(7) 上一回讲到了drm_internal_framebuffer_create函数中的framebuffer_check函数中的drm_get_format_info函数,讲解了该函数的第一部分暨前一部分,本文讲解后一部分。为了便于理解以及理清脉络和当前所…

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;…

【c++】向webrtc学AheadOf、IsNewerTimestamp比较

webrtc源码分析-rtp序列号新旧比较 大神文章分析的非常到位。大神分析:AheadOrAt(a, b)是判断a是否比b新的核心,其原理是这样的:rfc1982规定了序列号递增间隔不能超过取值范围的1/2(这是自己理解的),那么要判断a是否比b新,只要判断b到a的递增是否在1/2即可,递增超过1/2,…

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…

css列表

在CSS中&#xff0c;你可以使用样式规则来自定义HTML列表的外观。HTML中有两种常见的列表类型&#xff1a;无序列表&#xff08;<ul>&#xff09;和有序列表&#xff08;<ol>&#xff09;。可以用于自定义列表&#xff1a; 自定义无序列表&#xff08;无序列表符号…

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…