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.hqwc.cn/news/138895.html

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

相关文章

如何成功安装Node.js并在VS Code终端使用npm

✨✨✨ 感谢优秀的你打开了小白的文章 “希望在看文章的你今天又进步了一点点&#xff0c;生活更加美好&#xff01;”&#x1f308;&#x1f308;&#x1f308; 目录 1.什么是Node.js? 2.解决方法 3.淘宝镜像安装 1.什么是Node.js? Node.js 是一种开源与跨平台的 JavaSc…

Memory Analyzer分析内存溢出

一、下载和安装 访问Eclipse MAT官网&#xff0c;下载适用于你操作系统的最新版本的MAT&#xff0c;并进行安装。 二、使用 2.1 导出Heap Dump文件 2.1.1 使用jmap命令导出Heap Dump文件 可以在终端或命令提示符中执行以下命令: jmap -dump:formatb,file/path/to/heapdum…

dubbo-admin安装

一、dubbo-admin安装 1、环境准备 dubbo-admin 是一个前后端分离的项目。前端使用vue&#xff0c;后端使用springboot&#xff0c;安装 dubbo-admin 其实就是部署该项目。我们将dubbo-admin安装到开发环境上。要保证开发环境有jdk&#xff0c;maven&#xff0c;nodejs 安装no…

【大数据Hive】hive select 语法使用详解

目录 一、前言 二、Hive select 完整语法树 三、Hive select 操作演示 3.1 数据准备 3.1.1 创建一张表 3.1.2 将数据load加载到t_usa_covid19表 3.1.3 再创建一张分区表 3.1.4 使用动态分区插入数据 3.2 select 常用语法 3.2.1 查询所有字段或者指定字段 3.2.2 查询…

跬智信息(Kyligence)成为信创工委会技术活动单位

近日&#xff0c;跬智信息经过层层筛选和评审&#xff0c;成功加入中国电子工业标准化技术协会信息技术应用创新工作委员会&#xff08;以下简称信创工委会&#xff09;&#xff0c;正式成为信创工委会技术活动单位。 中国电子工业标准化技术协会信息技术应用创新工作委员会成立…

React中的key有什么作用

一、是什么 首先&#xff0c;先给出react组件中进行列表渲染的一个示例&#xff1a; const data [{ id: 0, name: abc },{ id: 1, name: def },{ id: 2, name: ghi },{ id: 3, name: jkl } ];const ListItem (props) > {return <li>{props.name}</li>; };co…

多线程下的单例设计模式(新手必看!!!)

在项目中为了避免创建大量的对象&#xff0c;频繁出现gc的问题&#xff0c;单例设计模式闪亮登场。 一、饿汉式 1.1饿汉式 顾名思义就是我们比较饿&#xff0c;每次想吃的时候&#xff0c;都提前为我们创建好。其实我记了好久也没分清楚饿汉式和懒汉式的区别。这里给出我的一…

安装Elasticsearch步骤(包含遇到的问题及解决方案)

注&#xff1a;笔者是在centos云服务器环境下安装的Elasticsearch 目录 1.安装前准备 2.下载Elasticsearch 3.启动Elasticsearch 非常容易出问题 第一次运行时&#xff0c;可能出现如下错误&#xff1a; 一、内存不足原因启动失败 二、使用root用户启动问题 三、启动ES自…

利用QT通过http协议,来实现上传文件功能

#假如你有一台服务器&#xff0c;你最想做哪些事&#xff1f;# 大体上的软件界面如下&#xff1a; 主要阐述一哈写的这个软件实现的功能&#xff1a; 通过名称找到指定的文件&#xff0c;并且将文件按照后缀名的格式进行分开&#xff0c;最后再将所有找到的文件&#xff0c;进…

【4】c++11新特性(稳定性和兼容性)—>final关键字

c中增加了final关键字来限制某个类不能被继承&#xff0c;或者某个虚函数不能被重写。如果使用final修饰函数&#xff0c;只能修饰虚函数&#xff0c;并且放在类或者函数的后面。 修饰函数 #include <iostream> using namespace std;class Base { public:virtual void t…

unity(WebGL) 截图拼接并保存本地,下载PDF

截图参考&#xff1a;Unity3D 局部截图、全屏截图、带UI截图三种方法_unity 截图_野区捕龙为宠的博客-CSDN博客 文档下载&#xff1a; Unity WebGL 生成doc保存到本地电脑_unity webgl 保存文件_野区捕龙为宠的博客-CSDN博客 中文输入&#xff1a;Unity WebGL中文输入 支持输…

Liunx C运算符

一、运算符 &#xff08;一&#xff09;算数运算符 1、float和double不能进行取余操作。 &#xff08;二&#xff09;关系运算符 1、逻辑非 2、逻辑与 例子&#xff1a; if(&#xff08;a-1&#xff09;<b&&b) 如果为真则自增&#xff0c;为假不自增 3、逻辑或 …