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

news/2024/12/13 0:28:05/

在这里插入图片描述

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

文档地址 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.ppmy.cn/news/1152426.html

相关文章

2023年中国智能矿山发展历程及趋势分析:智能矿山健康有序发展[图]

智能矿山系统对矿山生产提质增效的效果已经开始显现&#xff1a;对不合规、有风险的行动进行及时预警&#xff0c;减少安全事故发生概率&#xff0c;避免因停产整顿产生的巨额亏损&#xff1b;精细化管理整个生产流程&#xff0c;避免过往传统粗放的流程导致的浪费&#xff0c;…

【IDE插件教学】华为云应用中间件系列—Redis实现(电商游戏应用)排行榜示例

云服务、API、SDK&#xff0c;调试&#xff0c;查看&#xff0c;我都行 阅读短文您可以学习到&#xff1a;应用中间件系列之Redis实现&#xff08;电商游戏应用&#xff09;排行榜示例 1 什么是DEVKIT 华为云开发者插件&#xff08;Huawei Cloud Toolkit&#xff09;&a…

2023年中国玉米深加工产能、市场规模、消费量及产品需求结构[图]

玉米深加工顾名思义就是将产业链延长,进而提升产品附加值,利用玉米提炼出酒精、玉米胚芽油、淀粉和饲料等大概两百余种玉米深加工产品。我国是玉米种植大国&#xff0c;也是玉米深加工大国&#xff0c;但是玉米加工行业却长时间处于产能过剩、开工率不足、利润率低下的境况&…

LCR 026. 重排链表

LCR 026. 重排链表 题目链接&#xff1a;LCR 026. 重排链表 注&#xff1a;该题与 143. 重排链表完全一样 代码如下&#xff1a; class Solution { public:void reorderList(ListNode* head){if(headnullptr||head->nextnullptr||head->next->nextnullptr)return;L…

微服务 BFF 架构设计

在现代软件开发中&#xff0c;由于程序、团队、数据规模太大&#xff0c;需要把企业的业务能力进行复用&#xff0c;将领域服务剥离&#xff0c;提供通用能力&#xff0c;避免重复建设和代码&#xff1b;另外服务功能的弹性能力不一样&#xff0c;比如定时任务、数据同步明确的…

一次c++监听Linux文件目录的实践

目的&#xff1a;监听系统/data/system/dropbox目录&#xff0c;解析出crash和ANR&#xff0c;并上传云端。 这里只记录如何监听这个目录和实践中遇到的问题。 使用的到技术&#xff1a; 1.inotify 2.epoll 3.thread 环境&#xff1a;android系统 demo测试&#xff1a; …

C语言【关键字】

C语言中32个关键词的含义和用途 分 类 关键字 含义和用途 基本数据类型 简单数据类型 int 声明整型变量或函数 char 声明字符型变量或函数 float 声明浮点型变量或函数 double 声明双精度变量或函数 特殊类型 register 声明寄存器变量 void 声明函数无返回…

软件测试/测试开发/人工智能丨聊聊AutoGPT那些事儿

点此获取更多相关资料 简介 在 ChatGPT 问世之后&#xff0c;大家很容易就发现其依然具备一些很难解决的问题&#xff0c;比如&#xff1a; Token 超出限制怎么办&#xff1f;&#xff08;目前最新的 GPT4 支持最多8,192 tokens&#xff09;。如何完全自动化&#xff1f;任务…