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演绎黑白艺术
在影像的世界里,色彩可以让画面更丰富,更具有表现力,往往也能带来更多的视觉冲击。但有时候,黑白却有着一种独特的魅力。华为Pura 70系列XMAGE黑白风格,则给我们了一把通过纯粹艺术大门的钥匙。 XMAGE黑白并非简单的色…...
Cartographer前后端梳理
0. 简介 最近在研究整个SLAM框架的改进处,想着能不能从Cartographer中找到一些亮点可以用于参考。所以这一篇博客希望能够梳理好Cartographer前后端优化,并从中得到一些启发。carto整体是graph-based框架,前端是scan-map匹配,后端…...
Java面试题系列 - 第3天
题目:Java集合框架详解与高效使用策略 背景说明:Java集合框架是Java标准库的重要组成部分,提供了一系列容器类,如List、Set、Map等,用于存储和操作集合数据。熟练掌握集合框架的使用,对于编写高效、健壮的…...
【Spring Boot】Spring Boot简介
1、概述 Spring Boot是一个用于创建独立、生产级别的基于Spring的应用程序的开发框架。旨在简化Spring应用的初始搭建和开发过程。它通过自动配置和大量默认配置,使得开发者能够快速搭建一个独立的Spring应用,无需进行大量的手动配置。 2、主要特点 快…...
Akamai+Noname强强联合 | API安全再加强
最近,Akamai正式完成了对Noname Security的收购。本文我们将向大家介绍,经过本次收购后,Akamai在保护API安全性方面的后续计划和未来愿景。 Noname Security是市场上领先的API安全供应商之一,此次收购将让Akamai能更好地满足日益增…...
第四届BPAA算法大赛成功举办!共研算法未来
大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的…...
2024第三届中国医疗机器人大会第一轮通知
2024第三届中国医疗机器人大会第一轮通知 大会背景 医疗机器人技术正以前所未有的速度在主流医学领域取得卓越进展,新应用、新技术不断涌现,使得该领域在过去一年中取得了令人惊叹的增长。然而,这仅仅是冰山一角,未来的发展空间仍…...
常见算法和Lambda
常见算法和Lambda 文章目录 常见算法和Lambda常见算法查找算法基本查找(顺序查找)二分查找/折半查找插值查找斐波那契查找分块查找扩展的分块查找(无规律的数据) 常见排序算法冒泡排序选择排序插入排序快速排序递归快速排序 Array…...
自动缩放 win7 远程桌面
https://mremoteng.org/download 用这个软件,下载 zip 版,不需要管理员权限 在这里找到的,选票最高的一个就是 https://superuser.com/questions/1030041/remote-desktop-zoom-and-full-screen-how-win10-remote-win7-2008-2003-ho...
微机原理与单片机 知识体系梳理
单片机笔记分享 我个人感觉单片机要记的东西很多,也很琐碎,特别是一些位、寄存器以及相关作用等,非常难以记忆。因此复习时将知识点整理在了一起做成思维导图,希望对大家有所帮助。内容不是很多,可能有些没覆盖全&…...
低音炮内存卡格式化后无法播放音乐文件
试了多次 不支持ntfs不支持exfat 仅支持fat32 FAT32与exFAT的区别主要体现在来源、单个文件限制、适用情况以及兼容性方面。12 来源: FAT32是Windows平台的传统文件格式,首次在Windows 95第二版中引入,旨在取代FAT16,具有良好的…...
手动将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中,构造函数是一种特殊成员函数,它有一下几个明显的特征: 1、它自动在创建新对象时被调用。 2、其名称与类名相同, 3、没有返回类型, 4、通常没有参数(除了默认情况下的隐式thi…...
工作两年后,我如何看待设计模式
在软件工程中,设计模式是经过反复验证的最佳实践,用于解决在软件设计中经常遇到的一类问题。它们为开发者提供了一种通用的解决方案和语言,使得复杂的编程问题得以简化,代码结构更加清晰,可维护性大大提高。简而言之&a…...
01 Web基础与HTTP协议
1、域名和DNS 1.1 域名的概念 如果说一个主机,没有名字也可以完全用IP来代替,但是IP地址不好记忆。例如说,我们记一些网站的名称百度、新浪、搜狐等很好记,但是如果要去记百度的IP、新浪的IP、以及搜狐的IP地址,那将会…...
Java求自然常数e的近似值(课堂实例1)
❤❤引言🎃🎃 ❤点关注编程梦想家(大学生版)-CSDN博客不迷路~~~~~~❤ 自然常数 𝑒e 是数学中一个非常重要的常数,约等于 2.71828,它在自然对数、复合利息计算等领域有着广泛的应用。本文将介绍如…...
简过网:什么是咨询工程师?我不允许还有人不知道!
咨询工程师真的有必要考吗?近期小编收到很多关于咨询工程师的的问题,今天,小编给大家整理汇总了一下关于咨询工程师的相关问题,希望能够帮助到大家! 一、什么是咨询工程师? 咨询工程师是从事工程咨…...
数据泄露时代的安全之道:访问认证的重要性
引言 想象一下:你一觉醒来,收到一条通知——你的公司遭遇了数据泄露。你感到恐惧,因为这意味着客户数据被曝光,公司声誉受损,还有巨额罚款在等着你。在当今的数字化环境中,这种情况太常见了。全球各地的组…...
XLSX + LuckySheet + LuckyExcel + Web Worker实现前端的excel预览
文章目录 功能简介简单代码实现web worker 版本效果参考 功能简介 通过LuckyExcel的transformExcelToLucky方法, 我们可以把一个文件直接转成LuckySheet需要的json字符串, 之后我们就可以用LuckySheet预览excelLuckyExcel只能解析xlsx格式的excel文件&a…...
Qwen-Image-2512-Pixel-Art-LoRA 模型v1.0 系列作品展:构建一个完整的像素风奇幻世界
Qwen-Image-2512-Pixel-Art-LoRA 模型v1.0 系列作品展:构建一个完整的像素风奇幻世界 朋友们,今天不聊代码,不聊部署,咱们来看点“好玩”的。最近我深度体验了Qwen-Image-2512-Pixel-Art-LoRA模型,它最让我惊喜的&…...
降AIGC哪家强?2026零成本保姆级教程:DeepSeek/Kimi/豆包专属降重指令实测与差异解析
很多时候大学生写论文逻辑太严谨、话术太规范,反而会导致AI率过高,且一旦AI率过高,轻则退回重改,重则取消答辩资格,这后果谁都担不起。 为了帮大家有效降低aigc率,这周我专门针对目前市面上最主流的三款大…...
Obsidian Local Images Plus 插件使用指南
Obsidian Local Images Plus 插件使用指南 【免费下载链接】obsidian-local-images-plus This repo is a reincarnation of obsidian-local-images plugin which main aim was downloading images in md notes to local storage. 项目地址: https://gitcode.com/gh_mirrors/o…...
Nuxt4 官网访问来源统计的实现
今天我遇到一个值得记录的问题,场景是这样的:官网后台需要做访问统计,我得把访问来源和访问目标的 URL 传递给后端。绕了好一阵子,才终于理清楚。 项目结构上,Nuxt 4 负责官网展示,后端是 Java 服务。核心…...
开源项目国际化:多语言配置全流程指南
开源项目国际化:多语言配置全流程指南 【免费下载链接】pivottable Open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with dragndrop. 项目地址: https://gitcode.com/gh_mirrors/pi/pivottable 跨国团队如何让…...
棉花打包机的设计【说明书(论文)+CAD+solidworks】
棉花打包机作为农业机械化领域的关键设备,其核心作用在于将散状棉花高效压缩成标准化包型,以满足运输、仓储及后续加工的工艺需求。传统打包方式依赖人工或简单机械,存在效率低、包型不均、劳动强度大等问题,而现代棉花打包机通过…...
AceCommon:Arduino嵌入式零堆分配轻量C++工具库
1. AceCommon 库概述:面向嵌入式 Arduino 的轻量级底层工具集AceCommon 是一个专为资源受限的微控制器平台(尤其是 Arduino 生态)设计的零依赖、低开销 C 工具库。其核心设计哲学是“小而精、无侵入、可复用”。与常见的功能臃肿、依赖繁杂的…...
5步告别Windows卡顿:Win11Debloat系统优化工具让电脑性能提升51%的实战指南
5步告别Windows卡顿:Win11Debloat系统优化工具让电脑性能提升51%的实战指南 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本,用于从Windows中移除预装的无用软件,禁用遥测,从Windows搜索中移除Bing,以及执行各…...
python基于微信小程序的直播带货商品数据分析系统的爬虫可视化
目录需求分析与系统架构设计微信小程序数据爬取方案数据存储与清洗数据分析与可视化系统集成与部署注意事项项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作需求分析与系统架构设计 明确系统目标为爬取微信小程序直播带货商品数…...
WSABuilds系统调用:Windows与Android内核交互机制解析
WSABuilds系统调用:Windows与Android内核交互机制解析 【免费下载链接】WSABuilds Run Windows Subsystem For Android on your Windows 10 and Windows 11 PC using prebuilt binaries with Google Play Store (MindTheGapps) and/or Magisk or KernelSU (root sol…...
