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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/39251.shtml

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

相关文章

如何在恶意软件攻击后恢复已删除的照片

您是否尝试访问 PC 上的照片&#xff0c;但无法打开或丢失&#xff1f;您的 PC 可能正面临恶意软件攻击。 通常&#xff0c;当恶意软件进入系统时&#xff0c;它会与硬盘上的文件交互并破坏或感染它们。您的 PC 的防火墙和防病毒程序通常足以从 PC 中删除这些恶意文件。然而&a…

Flutter CTO 2024 报告出炉解读,看看有没有你关心的问题

Flutter CTO 2024 是由 LeanCode 主导进行的一次技术调查报告&#xff0c;本次报告数据来自 70 多个国家的 300 名 CTO、CIO 和技术主管&#xff0c;报告包含了 52 个问题、 7 次人物面对面访谈和 10 多位合作伙伴的协助 。 报告里 85% 的受访者拥有超过 5 年的⼯作经验&#…

redis实用技能

为什么要使用redis及其使用场景 大部分场景是应对高并发高性能场景才会使用,就是访问量已经超过mysql所能承受的,需要做缓存,帮助mysql分流。或者一些复杂查询,mysql执行很慢没法优化,可以做缓存提速(做缓存)做认证服务的时候需要存储用户的session信息,使用redis数据有…

LineageOs-21.0系统编译问题

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

【Python】迭代器、生成器、表达式

列表推导式 列表推导式是Python中快速生成列表的一种方法&#xff0c;它允许你使用可迭代对象快速生成一个列表&#xff0c;可以替代简单的循环语句。 基本结构&#xff1a;[expression for item in iterable if condition] expression&#xff1a;基于迭代变量&#xff0c;…

机器学习:预测评估8类指标

机器学习&#xff1a;8类预测评估指标 R方值、平均值绝对误差值MAE、均方误差MSE、均方误差根EMSE、中位数绝对误差MAD、平均绝对百分误差MAPE、可解释方差分EVS、均方根对数误差MLSE。 一、R方值 1、说明&#xff1a; R方值&#xff0c;也称为确定系数或拟合优度&#xff…

多语言模型(Multilingual Models)用于推理(Inference)

在深入探讨多语言模型&#xff08;Multilingual Models&#xff09;用于推理&#xff08;Inference&#xff09;的详细内容时&#xff0c;我们需要首先理解多语言模型的基本概念、它们如何工作、为什么它们在现代自然语言处理&#xff08;NLP&#xff09;中变得如此重要&#x…

excel PivotTable 透视表

开发数据导出excel功能&#xff0c;设置导出透视表 数据源&#xff1a; 透视表&#xff1a; 使用插件EPPlus 数据源&#xff1a; IF OBJECT_ID(tempdb..#temptable) IS NOT NULLDROP TABLE #temptable; CREATE TABLE #temptable ( [PROJECT] varchar(50), [PRODUCT_CODE] var…

springboot双学位招生管理系统-计算机毕业设计源码93054

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作…

ruoyi-cloud登录接口实现滑块验证码

一、前言 ruoyi项目默认的验证码是这样的 今天来尝试增加滑块验证码&#xff0c;我们用到的是tianai-captcha。 文档地址&#xff1a;http://doc.captcha.tianai.cloud/ 源码地址&#xff1a;https://gitee.com/tianai/tianai-captcha 下面来看具体的步骤。 二、后端 在g…

从游戏到营销:抽卡机小程序的多维度应用探索

在数字化时代&#xff0c;小程序作为一种轻量级、即用即走的应用形态&#xff0c;正逐步渗透到人们生活的方方面面。其中&#xff0c;抽卡机小程序以其独特的趣味性和互动性&#xff0c;不仅在游戏领域大放异彩&#xff0c;更在营销领域展现出广阔的应用前景。本文将从游戏起源…

ELFK简介

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;CSDN博客专家   &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01…

vtk跨节点并行渲染

VTK&#xff08;Visualization Toolkit&#xff09;是一个用于科学计算可视化的开源库。在处理大型数据集时&#xff0c;通常需要进行跨节点&#xff08;分布式处理&#xff09;并行处理以提升性能。VTK支持使用MPI&#xff08;Message Passing Interface&#xff09;库进行并行…

.net core Redis 使用有序集合实现延迟队列

Redis 有序集合和集合一样也是 string 类型元素的集合,且不允许重复的成员。 不同的是每个元素都会关联一个 double 类型的分数。redis 正是通过分数来为集合中的成员进行从小到大的排序。 有序集合的成员是唯一的,但分数(score)却可以重复。 集合是通过哈希表实现的&#xf…

Hadoop-11-MapReduce JOIN 操作的Java实现 Driver Mapper Reducer具体实现逻辑 模拟SQL进行联表操作

章节内容 上一节我们完成了&#xff1a; MapReduce的介绍Hadoop序列化介绍Mapper编写规范Reducer编写规范Driver编写规范WordCount功能开发WordCount本地测试 背景介绍 这里是三台公网云服务器&#xff0c;每台 2C4G&#xff0c;搭建一个Hadoop的学习环境&#xff0c;供我学…

文件扫描pdf怎么弄?5个简易高效的文件扫描方法

在繁忙的工作中&#xff0c;我们常常需要将纸质文件快速转换为电子文档&#xff0c;以便于编辑、存储或分享。 无论是合同、报告还是笔记&#xff0c;将这些纸质文件转换为Word格式&#xff0c;不仅能提高工作效率&#xff0c;还能确保信息的安全备份。然而&#xff0c;面对市…

前端领域创作者纪念日:回顾与展望

引言 在2048天前&#xff0c;我加入了CSDN。本文将带您回顾前端技术的发展历程&#xff0c;探索前端创作者的贡献&#xff0c;并展望未来的发展方向。 前端技术的发展历程 前端技术的发展可以追溯到互联网的早期时代。最初的网页主要是静态的HTML文档&#xff0c;内容简单&…

57、Flink 的项目配置概述

1&#xff09;概览 1.开始 要开始使用 Flink 应用程序&#xff0c;请使用以下命令、脚本和模板来创建 Flink 项目。 可以使用如下的 Maven 命令或快速启动脚本&#xff0c;基于原型创建一个项目。 a&#xff09;Maven 命令 mvn archetype:generate \-Darch…

开源大模型的中流砥柱——LLaMA

元宇宙平台公司在近年来大力发展人工智能技术,尤其在大规模语言模型(LLM)领域取得了显著进展。其代表性作品LLaMA(Large Language Model)及其后续版本LLaMA 2和LLaMA 3,成为了业界关注的焦点。 LLaMA模型的发布与许可 LLaMA模型的发布标志着在自然语言处理(NLP)领域的…

使用 Spring Security 配置 HTTPS

引言 为了保护敏感数据免受网络攻击&#xff0c;在 Web 应用中使用 HTTPS 是必不可少的。HTTPS 提供了数据传输的加密&#xff0c;确保数据在客户端和服务器之间传输时的安全性。Spring Security 提供了简单的配置方式来实现 HTTPS。本文将详细介绍如何在 Spring Boot 项目中配…