element upload限制图片上传格式

2023-10-31

限制图片的格式

html部分
在这里插入图片描述
点击选择图片的正常操作是只会出现图片格式
在这里插入图片描述
如果选择所有文件,我们就要重新进行验证
在这里插入图片描述
在选择照片的时候我们就要进行判断,所以是在on-change事件中判断是否为照片格式。先封装一个isImage方法:

 isImage(fileName) {
	    if (typeof fileName !== 'string') return;
	    let name = fileName.toLowerCase();
	    return name.endsWith('.png') || name.endsWith('.jpeg') || name.endsWith('.jpg') || name.endsWith('.png') || name.endsWith('.bmp');
	  }

在handleChange事件中使用

  handleChange(file, fileList) {
        this.fileList = fileList;
        this.image = fileList;
		let type =this.isImage(file.name);
		let fileLength = this.fileList.length;
	    if (!type) {
	 // 如果不符合上述图片类型,则从上传对列删除本次上传
		    this.fileList.splice(fileLength - 1, 1);
		    this.$message.error('只允许上传图片');
	    }		     		  
      },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element upload限制图片上传格式 的相关文章

随机推荐

  • 解析波士顿动力Handle机器人背后的技术(附PPT+视频)

    转 http www leiphone com news 201703 URrR8CG2tmtghNDl html 导语 Boston Dynamics 在机器人动力方面堪称翘楚 其由双足或多足机器人组成的机器人天团总是时不时能给我们带来惊
  • Python3 pip

    Python3 pip pip 是 Python 包管理工具 该工具提供了对 Python 包的查找 下载 安装 卸载的功能 软件包也可以在 https pypi org 中找到 目前最新的 Python 版本已经预装了 pip 注意 Py
  • Nginx添加SSL模块

    目录 一 SSL 概述 SSL证书 HTTPS SSL工作原理 二 创建SSL证书 安装openssl 生成证书 三 nginx配置 nginx打补丁添加模块 nginx conf配置 四 访问 一 SSL 概述 SSL Security
  • 向日葵权限mac

    问题 权限打开后自动关上 解决 mac上几乎所有远程软件都会出现这种权限设置问题 换了腾讯会议或其他也没用 方法一 试试先打开系统的安全性设置 将向日葵软件从隐私框里移出来 点击 号移除 再重新添加进去 方法二 将权限的勾选去掉 再添加 然
  • EFCore 数据模型 和 值转换

    操作中经常要涉及到模型和值转换的问题 这里记录一下 实际使用过程中遇到过的问题 而非功能的全部 模型 EFCore中支持字段 参考地址 https docs microsoft com zh cn ef core modeling back
  • SpringBoot框架详解,实战入门教程

    SpringBoot作为当下Java开发最常用的技术框架 相信你也一定听过很多次了 那么到底什么是SpringBoot SpringBoot又有什么用呢 跟着动力节点的视频快速入门springboot 视频观看资源 https www bi
  • CIKM 2023|TASTE:通过文本匹配缓解序列化推荐中流行偏差问题

    序列化推荐系统旨在根据用户的浏览历史动态地为用户推荐下一个商品 这在Yelp TikTok Amazon等众多Web应用程序中发挥着至关重要的作用 这些推荐系统通过使用不同的神经网络架构来学习用户 商品交互中商品之间的依赖关系 从而对用户行
  • Qt:文管打开方式:选择并设置默认程序

    默认启动APP配置文件 local share applications mimeapps list config mimeapps list etc gnome defaults list 全局 QAction action choose
  • 整理一些spring常见的扩展点

    一 各种后处理器 1 1 BeanDefinition与BeanFactory扩展 1 1 1 BeanDefinitionRegistryPostProcessor接口 Extension to the standard link Bea
  • 解决Vue前端报错——Error: Cannot find module ‘node-sass‘

    解决Vue前端报错 Error Cannot find module node sass 今天在使用VsCode 导入一个新Vue項目文件夹的时候出现了以下的问题 npm run dev提示 Cannot find module node
  • Winform自定义表单(转)

    出处 http www newlifex com showtopic 167 aspx 好吧 附件真的损坏了 原始代码我也没有了 再提取我也没精力了 不好意思 哪位之前下过可以重发一遍吗 不过即使没有也可以参考下面几个示例很快就可以做出来了
  • docker容器二之Dockerfile详解+镜像的优化

    文章目录 Dockerfile详解 Dockerfile常用指令 Dockerfile示例 实验截图 解决报错 Shell和exec格式的区别 镜像的优化 Dockerfile详解 Dockerfile常用指令 首先先明白 什么是Docke
  • matlab/simulink scope 示波器添加菜单栏的方法

    在用matlab simulink scope 示波器的时候 弹出的图像框没有菜单栏 保存复制等操作极为不便 以下操作可以让示波器的图形窗口显示出菜单栏 在matlab的command window里执行下面两句代码 set 0 ShowH
  • 【华为OD机试】工号不够用了怎么办【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 3020年 空间通信集团的员工人数突破20亿人 即将遇到现有工号不够用的窘境 现在 请你负责调研新工号系统 继承历史传统 新的工号系统由小写英文字母 a z 和数字
  • spring的ApplicationContext 得到方式

    ClassPathXmlApplicationContext会自己在CLASSes里面找 不过我只是把配置文件放在src文件下成功找到过 String paths applicationContextDataSource xml appli
  • MarkDown中写流程图的方法

    序 Mermaid FlowChat 中译为美人鱼 就好比一条美人鱼在流动构成了流程图 是一种在MarkDown中以特定格式的文字生成流程图或是图标的方法 一种简单的降价式脚本语言 用于通过javascript从文本生成图表 官方文档点这里
  • 【华为OD机试真题】94、猜密码

    文章目录 一 题目 题目描述 输入输出 样例1 二 代码与思路参考 C语言思路 C代码 C 语言思路 C 代码 Java语言思路 Java代码 Python语言思路 Python代码
  • 13-集合框架

    引言 集合框架 理解为集合体系指的是由很多类共同构成 这些类之间存在关系 继承或实现 是成体系的类和接口 一 认识集合 在java程序中 集合是存放数据的容器 它数组一样 但是但是 是存在差异的 从使用上说 集合更为方便 因为集合容量会随着
  • LTP--Linux Test Project

    简介 LTP套件是由 Linux Test Project 所开发的一套系统测试套件 它基于系统资源的利用率统计开发了一个测试的组合 为系统提供足够的压力 通过压力测试来判断系统的稳定性和可靠性 压力测试是一种破坏性的测试 即系统在非正常的
  • element upload限制图片上传格式

    限制图片的格式 html部分 点击选择图片的正常操作是只会出现图片格式 如果选择所有文件 我们就要重新进行验证 在选择照片的时候我们就要进行判断 所以是在on change事件中判断是否为照片格式 先封装一个isImage方法 isImag