当前位置: 首页 > news >正文

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);}}}

相关文章:

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"…...

CentOS7卸载硬盘报错:umount: /data: target is busy.

问题描述 umount: /data: target is busy. 问题分析 硬盘正在被使用&#xff0c;不能被卸载。 解决方案 查看哪些程序在使用硬盘 [rootlocalhost ~]# lsof /data/ COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME mysqld 15655 polkitd cwd …...

Chrome插件精选 — 鼠标手势插件

Chrome实现同一功能的插件往往有多款产品&#xff0c;逐一去安装试用耗时又费力&#xff0c;在此为某一类型插件记录下比较好用的一款或几款&#xff0c;便于节省尝试的时间和精力。 下面是两款比较好用的鼠标手势插件&#xff0c;支持很多设置选项&#xff0c;可以自定义手势&…...

JMeter分布式

一 分布式注意事项 关闭防火墙控制机和代理机在同一子网控制机和代理机上安装的jmeter和JDK版本要一样关闭jmeter的RMI SSL开关 二 代理机&#xff08;agent&#xff09;的配置 修改服务端口 打开bin/jmeter.properties文件&#xff0c;修改’server_port’ 将RMI SSL设备…...

[华为杯研究生创新赛 2023] 初赛 REV WP

前言 一年没打比赛了, 差一题进决赛, REV当时lin的第三个challenge没看出来是凯撒, 想得复杂了, 结果错失一次线下机会 >_< T4ee 动态调试, nop掉反调试代码 发现处理过程为 置换sub_412F20处理(这里看其他师傅的wp知道应该是rc4, 我是直接en逆的buf字符串中每一位和…...

C++中resize和reserve

1.reserve(n)对capacity操作 capacity < n : 扩容capacity > n : 不操作 2.resize(n, m)对size操作 size < n : size增加到n 增加的值为msize > n : size减小到ncapacity < n : 先增大容量至n 再增大size至n 增加的值为m...

【面试经典150 | 哈希表】存在重复元素 II

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;哈希表方法二&#xff1a;滑动窗口 其他语言python3哈希表python3滑动窗口 写在最后 Tag 【哈希表】【滑动窗口】【数组】 题目来源 219. 存在重复元素 II 题目解读 判断在数组中有没有相同的元素小于一定的距离。 解…...

Intellij 安装配置 lombok

Intellij 安装配置 lombok 用 lombok 能够减少 setter/getter/noArgsConstructor 这样的 boilerplate 代码&#xff0c;所以用起来还是比较方便的。 刚开始以为直接安装到 maven 里面就能用了&#xff0c;运行的时候发现 Getter, Data 这些 annotation 根本找不到&#xff0c…...

Chrome插件精选 — 暗色主题插件

Chrome实现同一功能的插件往往有多款产品&#xff0c;逐一去安装试用耗时又费力&#xff0c;在此为某一类型插件记录下比较好用的一款或几款&#xff0c;便于节省尝试的时间和精力。 Dark Reader 下载地址 (访问密码: 8276) Dark Reader是一款浏览器扩展程序&#xff0c;用于…...

PXE解决uefi安装centos6黑屏问题

解决pxe安装centos6黑屏 author: 铁乐与猫 date:2021.12.10 背景 主板&#xff1a;supermicr SBI-4129P-T3N System InformationManufacturer: SupermicroProduct Name: SBI-4129P-T3NVersion: 123456789Serial Number: S264322X9905439UUID: 00000000-0000-0000-0000-AC1…...

Feign 调用为何POST不支持同时传入多个SpringQueryMap对象,但是GET方法就支持?

Feign 调用为何POST不支持同时传入多个SpringQueryMap对象&#xff0c;但是GET方法就支持&#xff1f; 1.1 问题背景1.2 原因分析1.3 修复方案1.3.1 修复方案一 切换使用GET方法&#xff0c;可以试用多个SpringQueryMap注解 &#xff08;测试实际不行&#xff09;1.3.2 修复方案…...

RISC-V 特权级架构

特权级别 级别的数值越大&#xff0c;特权级越高&#xff0c;掌控硬件的能力越强&#xff0c;在CPU硬件层面&#xff0c;M模式必须存在&#xff0c;其它模式可以不存在 执行环境调用 ecall &#xff0c;这是一种很特殊的陷入类的指令&#xff0c; 相邻两特权级软件之间的接口正…...

目录启示:PHP 与命名空间的声明

文章目录 参考环境命名空间概念版本支持影响范围 全局命名空间概念魔术常量 \_\_NAMESPACE\_\_声明全局命名空间 声明命名空间为空间命名命名规则核心命名空间 子命名空间的声明在同一文件中定义多个命名空间无括号命名空间声明有括号命名空间声明禁止混合使用推荐使用有括号命…...

D. Divide and Equalize--Codeforces Round 903 (Div. 3)

D. Divide and Equalize 题意&#xff1a;让一组数中的一个数除以一个因子&#xff0c;一个数除以一个因子&#xff0c;假如经过若干次操作后能够使数组所有数相等&#xff0c;那么输出YES&#xff0c;否则输出NO。 分析&#xff1a;乘除因子&#xff0c;那么实际上就是因子的…...

保姆式教程:MAC安装Android studio(包括安装JDK,Android SDK),解决gradle下载慢的问题

文章目录 参考文章安装JDK并配置环境变量安装JDK配置JDK相关的环境变量 Android studio 安装下载Android studiogradle下载慢解决方法 安装Android SDK选择jdk版本安装SDK并配置环境变量 参考文章 原文链接 原文链接 安装JDK并配置环境变量 安装JDK 下载地址 下载后双击安装…...

Ps:选区的布尔运算

选区的布尔 Boolean运算指的是选区之间的相加&#xff08;并集&#xff09;、相减&#xff08;差集&#xff09;以及相交&#xff08;交集&#xff09;&#xff0c;从而形成一个新的选区。 ◆ ◆ ◆ 使用工具选项栏 在 Ps 中&#xff0c;几乎所有的选区工具的工具选项栏上都有…...

PyTorch 深度学习之卷积神经网络(基础篇)Basic CNN(九)

0. Revision: Fully connected Neural Network 全连接 1. Convolution Neural Network 保留空间信息 1.1 Convolution Convolution-Single Input Channel 单通道 数乘 3 input Channels 3通道 N input Channels N input Channels and M output channel M 个卷积核 1.2 conv…...

torch实现Gated PixelCNN

文章目录 PixelCNNGated PixelCNN PixelCNN import torch import torch.nn as nn import torch.nn.functional as F# Pixel CNNclass MaskConv2d(nn.Module):def __init__(self, conv_type, *args, **kwags):super().__init__()assert conv_type in (A, B)self.conv nn.Conv2…...

破局「二次创业」:合思的新解法

在新的水温下&#xff0c;寻找更为良性的发展正在成为企业的必答题。对此&#xff0c;合思给出的不仅是一份更“省”的答题方法。也更是从认知层到行动层&#xff0c;最后到工具层的一张授人以渔的“渔网”。 作者|思杭 编辑|皮爷 出品|产业家 今年4月初&#xff0c;广州…...

第五章:TCP和UDP基本原理

TCP和UDP基本原理 一、TCP/IP传输层的作用二、 端口1.范围2. 服务端3. 客户端4. 常见知名端口号4.1 TCP 80 HTTP4.2 TCP 20 21 FTP4.3 TCP 23 TELNET4.4 TCP 25 SMTP4.5 UDP 53 DNS4.6 TCP 443 HTTPS 三、 TCP原理1. TCP头部封装格式1.1 Source Port 源端口1.2 Destination Por…...

算法:动态规划的入门理解

文章目录 算法原理题目解析第n个泰波那契数列三步问题使用最小花费爬楼梯 从本篇开始总结的是动态规划的一些内容&#xff0c;动态规划是算法中非常重要的一个版块&#xff0c;因此也是学习算法中的一个重点&#xff0c;在学习动态规划前应当要把动态规划的基础知识学习一下 算…...

最新版nacos 2.2.3服务注册与发现版本依赖问题

最新版nacos的注册服务时配置文件写的是对的&#xff0c;但就是在nacos web页面无法看见服务&#xff0c;此时你需要注意你的依赖是否正确 spring: application:name: orderservicecloud:nacos:discovery:server-addr: 122.51.115.127:8848父工程依赖&#xff1a;现在最新的s…...

2023年中国合同能源管理行业研究报告

第一章 行业概况 1.1 定义及分类 合同能源管理 (Energy Performance Contracting, EPC) 是当前能源行业中一个重要的概念&#xff0c;它构建了一个桥梁&#xff0c;将节能服务公司 (Energy Management Company, EMCo) 与用能单位紧密联系在一起。通过特定的契约形式&#xff…...

php以半小时为单位,输出指定的时间范围

//可预订小时范围$hour [];for ($i$startHour*3600;$i<$endHour*3600;$i1800){//以半小时为单位输出$startHourItem date(H:i,strtotime(date(Y-m-d))$i);//小时开始$endHourItem date(H:i,strtotime(date(Y-m-d))$i1800);//当前时间再加半小时$hourItemStr $startHourI…...

Electron应用的 asar 打包 解压

前言&#xff1a; .asar文件是一种归档文件格式&#xff0c;通常用于封装Electron应用程序的资源。Electron是一个使得开发者能够使用Web技术构建跨平台桌面应用程序的框架。为了提高性能和简化部署&#xff0c;Electron应用程序的资源通常会被打包到一个.asar文件中。 安装 as…...

蓝桥等考Python组别十七级003

第一部分:选择题 1、Python L17 (15分) 运行下面程序,输出的结果是( )。 def func(x, y): return (x + y) // 3 print(func(7, 5)) 2468正确答案:B 2、Python L17 (15</...

Redis概述和与SpringBoot的整合

Redis是一种高性能的键值对存储数据库&#xff0c;它支持多种数据结构&#xff0c;包括字符串、哈希、列表、集合和有序集合等。Redis具有快速、可靠、灵活和可扩展等特点&#xff0c;也被广泛应用于缓存、队列和排行榜等场景。 SpringBoot是一种基于Spring框架的快速开发脚手…...

Python 中的 round() 函数:实现精确的数值舍入操作

round(x, n) 函数用于对数值 x 进行舍入操作&#xff0c;并指定保留的小数位数为 n。它的工作原理如下&#xff1a; 如果 x 的小数位数小于等于 n&#xff0c;则直接返回 x 本身。例如&#xff0c;round(3.1415, 2) 将返回 3.14。 如果 x 的小数位数大于 n&#xff0c;则按照四…...

在springboot中如何开启Bean数据校验

①&#xff1a;添加JSR303规范坐标与Hibernate校验框架对应坐标 <dependency><groupId>javax.validation</groupId><artifactId>validation-api</artifactId> </dependency><dependency><groupId>org.hibernate.validator<…...

【C语言好题系列三】

文章目录 学习导航一. 选择题二. 编程题(力扣/牛客网&#xff09;三. 总结 学习导航 一. 选择题 如下程序的运行结果是&#xff08;D&#xff09; char c[5]{a, b, \0, c, \0}; printf("%s", c);A: ‘a’ ‘b’ B: ab\0c\0 C: ab c D: ab 答案解析&#xff1a; 正…...