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

vant拍摄视频上传以及多张图片上传

数据定义

data() {return {fileList: [],vedioList: [],formData: '',fileTypes: 'image/png,image/jpeg,image/jpg,image/jpeg',}
},
beforeMount() {this.formData = new FormData()
},

拍摄视频上传

<van-uploaderv-if="radio === '1'"v-model="vedioList"accept="video/*":max-count="1":max-size="52428800"capture="camera":after-read="(file, detail) => uploadAfterReadFnVedio(file, detail, '现场视频')":before-delete="(e, $event) => { uploaderBeforeDeleteVedio(e, $event) }">
</van-uploader>

拍摄视频上传事件

uploadAfterReadFnVedio(file, { index }, name) {this.formData.set('files', file.file)file.status = 'uploading'file.message = '上传中...'// 此时可以自行将文件上传至服务器UploadVideo(this.formData).then((res) => {this.vedioList.push({ url: res.data[0], key: res.data[0], name: name })this.vedioList.splice(index, 1)}).catch((_) => {// eslint-disable-next-line no-param-reassignfile.status = 'failed'// eslint-disable-next-line no-param-reassignfile.message = '上传失败'})
},

选择多张图片上传

<van-uploaderv-model="fileList":accept="fileTypes"multiple:max-size="5242880":max-count="6":after-read="(file, detail) => uploadAfterReadFn(file, detail, reqSubmitSBSJSBGZ.ListPic, '现场图片')":before-delete="(e, $event) => { uploaderBeforeDelete(e, $event, reqSubmitSBSJSBGZ.ListPic) }">
</van-uploader>

多张图片上传事件

uploadAfterReadFn(file, { index }, list, name) {const types = this.fileTypes.split(',')// 判断是一张还是多张图片if (Array.isArray(file)) {file.forEach(item => {if (!types.find((v) => v === item.file.type)) {this.$toast({type: 'fail',message: '请上传正确的图片',className: 'noticeWidth'})}if (item.file.size <= 5 * 1024 * 1024) {this.$toast({type: 'fail',message: '上传文件超过5M',className: 'noticeWidth'})}this.formData.set('files', item.file)// eslint-disable-next-line no-param-reassignitem.status = 'uploading'// eslint-disable-next-line no-param-reassignitem.message = '上传中...'// 此时可以自行将文件上传至服务器UploadFile(this.formData).then((res) => {this.fileList.push({ url: item.content, isImage: true, key: res.data[0] })this.fileList.splice(index, 1)list.push({ url: res.data[0], isImage: true, key: res.data[0] })}).catch((_) => {// eslint-disable-next-line no-param-reassignitem.status = 'failed'// eslint-disable-next-line no-param-reassignitem.message = '上传失败'})})} else {if (!types.find((v) => v === file.file.type)) {this.$toast({type: 'fail',message: '请上传正确的图片',className: 'noticeWidth'})return false}if (file.file.size > 5 * 1024 * 1024) {this.$toast({type: 'fail',message: '上传文件超过5M',className: 'noticeWidth'})return false}this.formData.set('files', file.file)// eslint-disable-next-line no-param-reassignfile.status = 'uploading'// eslint-disable-next-line no-param-reassignfile.message = '上传中...'// 此时可以自行将文件上传至服务器UploadFile(this.formData).then((res) => {this.fileList.push({ url: file.content, isImage: true, key: res.data[0] })this.fileList.splice(index, 1)list.splice(index, 1, {url: res.data[0],value: res.data[0],key: name})// eslint-disable-next-line no-param-reassignlist = [...list]}).catch((_) => {// eslint-disable-next-line no-param-reassignfile.status = 'failed'// eslint-disable-next-line no-param-reassignfile.message = '上传失败'})}
},

toast样式

<style>
.noticeWidth{min-width: 150px !important;line-height: 34px;font-size: 24px;
}
</style>

相关文章:

vant拍摄视频上传以及多张图片上传

数据定义 data() {return {fileList: [],vedioList: [],formData: ,fileTypes: image/png,image/jpeg,image/jpg,image/jpeg,} }, beforeMount() {this.formData new FormData() },拍摄视频上传 <van-uploaderv-if"radio 1"v-model"vedioList"accep…...

如何用手机拍出高级感黑白色调照片?华为Pura70系列XMAGE演绎黑白艺术

在影像的世界里&#xff0c;色彩可以让画面更丰富&#xff0c;更具有表现力&#xff0c;往往也能带来更多的视觉冲击。但有时候&#xff0c;黑白却有着一种独特的魅力。华为Pura 70系列XMAGE黑白风格&#xff0c;则给我们了一把通过纯粹艺术大门的钥匙。 XMAGE黑白并非简单的色…...

Cartographer前后端梳理

0. 简介 最近在研究整个SLAM框架的改进处&#xff0c;想着能不能从Cartographer中找到一些亮点可以用于参考。所以这一篇博客希望能够梳理好Cartographer前后端优化&#xff0c;并从中得到一些启发。carto整体是graph-based框架&#xff0c;前端是scan-map匹配&#xff0c;后端…...

Java面试题系列 - 第3天

题目&#xff1a;Java集合框架详解与高效使用策略 背景说明&#xff1a;Java集合框架是Java标准库的重要组成部分&#xff0c;提供了一系列容器类&#xff0c;如List、Set、Map等&#xff0c;用于存储和操作集合数据。熟练掌握集合框架的使用&#xff0c;对于编写高效、健壮的…...

【Spring Boot】Spring Boot简介

1、概述 Spring Boot是一个用于创建独立、生产级别的基于Spring的应用程序的开发框架。旨在简化Spring应用的初始搭建和开发过程。它通过自动配置和大量默认配置&#xff0c;使得开发者能够快速搭建一个独立的Spring应用&#xff0c;无需进行大量的手动配置。 2、主要特点 快…...

Akamai+Noname强强联合 | API安全再加强

最近&#xff0c;Akamai正式完成了对Noname Security的收购。本文我们将向大家介绍&#xff0c;经过本次收购后&#xff0c;Akamai在保护API安全性方面的后续计划和未来愿景。 Noname Security是市场上领先的API安全供应商之一&#xff0c;此次收购将让Akamai能更好地满足日益增…...

第四届BPAA算法大赛成功举办!共研算法未来

大家好&#xff0c;我是herosunly。985院校硕士毕业&#xff0c;现担任算法研究员一职&#xff0c;热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名&#xff0c;CCF比赛第二名&#xff0c;科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的…...

2024第三届中国医疗机器人大会第一轮通知

2024第三届中国医疗机器人大会第一轮通知 大会背景 医疗机器人技术正以前所未有的速度在主流医学领域取得卓越进展&#xff0c;新应用、新技术不断涌现&#xff0c;使得该领域在过去一年中取得了令人惊叹的增长。然而&#xff0c;这仅仅是冰山一角&#xff0c;未来的发展空间仍…...

常见算法和Lambda

常见算法和Lambda 文章目录 常见算法和Lambda常见算法查找算法基本查找&#xff08;顺序查找&#xff09;二分查找/折半查找插值查找斐波那契查找分块查找扩展的分块查找&#xff08;无规律的数据&#xff09; 常见排序算法冒泡排序选择排序插入排序快速排序递归快速排序 Array…...

自动缩放 win7 远程桌面

https://mremoteng.org/download 用这个软件&#xff0c;下载 zip 版&#xff0c;不需要管理员权限 在这里找到的&#xff0c;选票最高的一个就是 https://superuser.com/questions/1030041/remote-desktop-zoom-and-full-screen-how-win10-remote-win7-2008-2003-ho...

微机原理与单片机 知识体系梳理

单片机笔记分享 我个人感觉单片机要记的东西很多&#xff0c;也很琐碎&#xff0c;特别是一些位、寄存器以及相关作用等&#xff0c;非常难以记忆。因此复习时将知识点整理在了一起做成思维导图&#xff0c;希望对大家有所帮助。内容不是很多&#xff0c;可能有些没覆盖全&…...

低音炮内存卡格式化后无法播放音乐文件

试了多次 不支持ntfs不支持exfat 仅支持fat32 FAT32与exFAT的区别主要体现在来源、单个文件限制、适用情况以及兼容性方面。12 来源&#xff1a; FAT32是Windows平台的传统文件格式&#xff0c;首次在Windows 95第二版中引入&#xff0c;旨在取代FAT16&#xff0c;具有良好的…...

手动将dingtalk-sdk-java jar包打入maven本地仓库

有时候,中央镜像库不一定有自己需要的jar包,这时候我们就需要用到该方法,将jar打入maven本地仓库,然后项目中,正常使用maven的引入规则。 mvn install:install-file -Dmaven.repo.local=D:\software\maven\apache-maven-3.6.3-bin\apache-maven-3.6.3\repo -DgroupId=ding…...

C++:构造函数是什么东西

一、构造函数是什么 在C中&#xff0c;构造函数是一种特殊成员函数&#xff0c;它有一下几个明显的特征&#xff1a; 1、它自动在创建新对象时被调用。 2、其名称与类名相同&#xff0c; 3、没有返回类型&#xff0c; 4、通常没有参数&#xff08;除了默认情况下的隐式thi…...

工作两年后,我如何看待设计模式

在软件工程中&#xff0c;设计模式是经过反复验证的最佳实践&#xff0c;用于解决在软件设计中经常遇到的一类问题。它们为开发者提供了一种通用的解决方案和语言&#xff0c;使得复杂的编程问题得以简化&#xff0c;代码结构更加清晰&#xff0c;可维护性大大提高。简而言之&a…...

01 Web基础与HTTP协议

1、域名和DNS 1.1 域名的概念 如果说一个主机&#xff0c;没有名字也可以完全用IP来代替&#xff0c;但是IP地址不好记忆。例如说&#xff0c;我们记一些网站的名称百度、新浪、搜狐等很好记&#xff0c;但是如果要去记百度的IP、新浪的IP、以及搜狐的IP地址&#xff0c;那将会…...

Java求自然常数e的近似值(课堂实例1)

❤❤引言&#x1f383;&#x1f383; ❤点关注编程梦想家&#xff08;大学生版&#xff09;-CSDN博客不迷路~~~~~~❤ 自然常数 &#x1d452;e 是数学中一个非常重要的常数&#xff0c;约等于 2.71828&#xff0c;它在自然对数、复合利息计算等领域有着广泛的应用。本文将介绍如…...

简过网:什么是咨询工程师?我不允许还有人不知道!

咨询工程师真的有必要考吗&#xff1f;近期小编收到很多关于咨询工程师的的问题&#xff0c;今天&#xff0c;小编给大家整理汇总了一下关于咨询工程师的相关问题&#xff0c;希望能够帮助到大家&#xff01; 一、什么是咨询工程师&#xff1f; 咨询工程师是从事工程咨…...

数据泄露时代的安全之道:访问认证的重要性

引言 想象一下&#xff1a;你一觉醒来&#xff0c;收到一条通知——你的公司遭遇了数据泄露。你感到恐惧&#xff0c;因为这意味着客户数据被曝光&#xff0c;公司声誉受损&#xff0c;还有巨额罚款在等着你。在当今的数字化环境中&#xff0c;这种情况太常见了。全球各地的组…...

XLSX + LuckySheet + LuckyExcel + Web Worker实现前端的excel预览

文章目录 功能简介简单代码实现web worker 版本效果参考 功能简介 通过LuckyExcel的transformExcelToLucky方法&#xff0c; 我们可以把一个文件直接转成LuckySheet需要的json字符串&#xff0c; 之后我们就可以用LuckySheet预览excelLuckyExcel只能解析xlsx格式的excel文件&a…...

英伟达黄仁勋力荐!2026年AI Agent元年,掌握这5大关键技术,成为行业风口!

0****1 什么是AI Agent&#xff1f; 随着人工智能技术加速演进&#xff0c;AI Agent&#xff08;人工智能代理&#xff0c;常称智能体&#xff09;正悄然渗透到企业运营与日常生活的各个角落&#xff0c;从大家熟悉的虚拟助手&#xff08;如Siri、小爱同学、豆包&#xff09;&a…...

[技术突破]obs-multi-rtmp:解决多平台直播资源浪费问题的高效分发方案

[技术突破]obs-multi-rtmp&#xff1a;解决多平台直播资源浪费问题的高效分发方案 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp 行业痛点诊断 直播行业正面临多平台分发的严峻挑战&a…...

深入解析串口通信:从RS232到RS485的工业应用实战

1. 串口通信的工业应用基础 第一次接触工业自动化项目时&#xff0c;我被现场密密麻麻的线缆搞得头晕眼花。直到老师傅指着角落里不起眼的两根双绞线说&#xff1a;"这条RS485总线控制着整条生产线的30台设备"&#xff0c;我才意识到串口通信在工业领域的强大之处。 …...

别再手动校正了!用Landsat 9 L2SP地表反射率数据,在QGIS里5分钟搞定NDVI和水体提取

遥感分析效率革命&#xff1a;用Landsat 9 L2SP数据在QGIS中实现5分钟精准制图 当遥感数据处理流程从传统数小时缩短至五分钟&#xff0c;这意味着什么&#xff1f;去年在亚马逊雨林监测项目中&#xff0c;我们团队曾因大气校正步骤延误错过了最佳干预时机。如今Landsat 9 L2SP…...

大数据运维 | 项目一:大数据分布式集群搭建全攻略

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 前言 作为一名大数据运维工程师&#xff0c;你是否遇到过这样的问题&#xff1a; 问题场景描述1机器A可正常上网&#xff0c;但机器B无法连接网…...

Agent 性能优化:降低 Token 消耗的 5 个技巧

Agent 性能优化&#xff1a;降低 Token 消耗的 5 个技巧系列文章&#xff1a; 《AI Agent 开发实战》第 7 期 难度等级&#xff1a; ⭐⭐⭐⭐ 预计耗时&#xff1a; 35 分钟&#x1f3af; 本文目标 学会优化 AI Agent 性能&#xff1a; ✅ 减少 Token 消耗✅ 提高响应速度✅ 降…...

开源风扇控制工具FanControl全攻略:从问题诊断到散热方案优化

开源风扇控制工具FanControl全攻略&#xff1a;从问题诊断到散热方案优化 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tren…...

终极指南:如何在.NET应用中快速集成VLC多媒体播放功能

终极指南&#xff1a;如何在.NET应用中快速集成VLC多媒体播放功能 【免费下载链接】Vlc.DotNet .NET control that hosts the audio/video capabilities of the VLC libraries 项目地址: https://gitcode.com/gh_mirrors/vl/Vlc.DotNet Vlc.DotNet是一个强大的.NET库&am…...

从数据采集到模型部署:用Lerobot+本地数据集训练一个会抓积木的机械臂(避坑指南)

从数据采集到模型部署&#xff1a;用Lerobot本地数据集训练一个会抓积木的机械臂&#xff08;避坑指南&#xff09; 当机械臂第一次准确抓取乐高积木并放入指定盒子时&#xff0c;那种成就感远超单纯调通代码的快感。Lerobot框架的出现&#xff0c;让机器人学习从实验室走向个人…...

猫抓插件:革新性浏览器资源捕获工具,让媒体下载效率倍增

猫抓插件&#xff1a;革新性浏览器资源捕获工具&#xff0c;让媒体下载效率倍增 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在数字内容爆炸的时代&#xff0c;如何高效获取网页中的视频、音频和图…...