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限制图片上传格式 的相关文章

  • 如何在 React JS 中根据键创建动态表?

    我正在尝试在 React JS 中创建一个动态表组件 该组件当前只有一个静态标头 其中包括最常见的结果键 有些结果还包含更多信息 例如电话号码 学位 如何根据键 值的存在动态地使用附加列扩展表 我应该与state并在存在时使其可见 或者我应
  • 如何使用标准 JavaScript 在 CSS 转换结束后立即重新启动它?

    我构建了一种密码生成器 只要倒计时到期 它就会显示新密码 不幸的是 我只设法弄清楚如何运行我的代码一次 倒计时由一个简单的 CSS 过渡组成 我想保留它 因为它比我的其他尝试平滑得多 其中我尝试使用 JavaScript 重复更新宽度 va
  • 获取 CRM 2011 中功能区按钮的 ID

    我创建了一个 JavaScript 我想在其中隐藏功能区Reactivate Lead按钮取决于某些条件 我通过在表单上按 F12 获得了按钮的 ID 即lead NoRelationship Form Mscrm Form lead Re
  • CSS 内边框?

    我纯粹用 CSS 创建了左侧的按钮 它是一个div 中的一个div 然而 右侧的三个按钮是background属性于img标签 我这样做是为了按照以下说明模拟翻转效果here http kyleschaeffer com best prac
  • 每n秒执行一次函数

    我制作了这个在 10 秒后点击链接的代码片段 function timeout window setTimeout function img left click 1000 setTimeout timeout 1000 timeout 我
  • 在 Cordova 中合并文件的多个部分

    在我的 Cordova 应用程序中 我正在下载任意文件 例如图像或视频文件 这是通过 Cordova 文件传输插件和 Range 标头完成的 因为我需要分段下载文件 我的问题是 我想将几 个小 字节 文件合并回原来的文件中 他们曾经在其中使
  • JavaScript 可以检测用户的浏览器是否支持 gzip 吗?

    我可以使用 JavaScript 来检测用户的浏览器是否支持 gzip 压缩内容 客户端 而不是 Node js 或类似内容 我正在尝试支持以下边缘情况 有很多可能的文件可以加载到特定的 Web 应用程序上 最好在应用程序运行时根据需要加载
  • Twitter Bootstrap - 下拉菜单 - 箭头键不适用于 Firefox 中的输入标签

    要求 我想在带有用户名和密码字段的下拉菜单中放置一个登录表单 我可以做到这一点 除了以下问题之外 一切正常 Issue 打字时我无法使用箭头键 上 下 firefox 当输入位于下拉代码之外时 这很有效 这适用于其他浏览器 例如 googl
  • IE localStorage 事件失火

    在 Internet Explorer 9 和 10 中 localStorage 实现意外地触发事件 这里有很棒的线索 Chrome 的 localStorage 实现存在错误 https stackoverflow com questi
  • Javascript location.href 到 mailto 触发 GET HTTP,该 HTTP 在 Chrome 中被取消

    我有一个按钮可以触发以下 javascript 函数 function sendEmail var mail mailto email protected cdn cgi l email protection location href m
  • 如何使用 NextJS 使用自托管字体face?

    使用 NextJS 的字体 我已经阅读了有关如何在 NextJS 中使用自托管字体的不同主题 我得到了什么 wait compiling 当我这样做时 font face font family montserrat src url myp
  • 使用 nockjs 和 jest 进行 Promise/异步单元测试的代码覆盖率问题

    我使用 NockJS 和 Jest 为 React 应用程序编写了一个简单的 API 调用单元测试 如下所示 AjaxService js export const AjaxService post url data headers gt
  • Javascript等待/异步执行顺序

    所以我试图把我的头脑集中在 Promise await async 上 我不明白为什么当 go 执行时 带有 finished 的警报会紧随 console log coffee 之后 当所有函数都使用等待 承诺时 为什么它只等待 getC
  • 什么时候可以使用Javascript,什么时候不可以?

    不使用太多 javascript jquery 是个好习惯吗 我们应该尽可能避免它 为了良好的可访问性 吗 什么时候可以使用 JavaScript 什么时候不能在网页设计和开发中使用 JavaScript 在什么场景 什么条件下 Updat
  • 如果 jquery 验证激活,如何在单选按钮中放置红色边框[重复]

    这个问题在这里已经有答案了 我的问题是 如果 jquery 验证像示例图片中那样激活 我无法使单选按钮具有红色边框 任何人都可以帮我解决这个问题吗 http i38 photobucket com albums e149 eloginko
  • 如何使用 jQuery 过滤 DropDownList 中的选项

    我有 2 个 DropDownList 第一个 DropDownList 有 4 个选项 第二个 DropDownList 有 20 个选项 我想要一个选项value 1在第一个 DropDownList 中选择我在第二个 DropDown
  • 在 Meteor 应用程序中实现 MongoDB 2.4 的全文搜索

    我正在考虑向 Meteor 应用程序添加全文搜索 我知道 MongoDB 现在支持此功能 但我对实现有一些疑问 启用文本搜索功能的最佳方法是什么 textSearchEnabled true 在 Meteor 应用程序中 有没有办法添加索引
  • highchart堆积柱每个类别的总数据

    我想获取每个类别的总数据 这point stackTotal只给出活动数据的总数 从我粘贴的代码示例中 我想知道每种水果的总消耗量 因此 即使我单击右上角图例上的乔的名字 这使得堆叠图表上的所有乔信息都处于非活动状态 我仍然可以知道约翰 简
  • Array.of 与“[ ]”。何时使用 Array.of 而不是“[ ]”?

    当我发现时我正在读一些书Array of https developer mozilla org en docs Web JavaScript Reference Global Objects Array of 根据 MDN Array o
  • 使用
    元素作为 JavaScript 代码的输入。这是最好的方法吗?

    各位 显然 我是编码新手 所以最近完成了一些有关 HTML 和 Javascript 的 Lynda 课程后 我的简单 HTML 页面遇到了困难 基本上 我想要的是使用 JavaScript 进行基本计算 让用户使用 HTML 输入两个数字

随机推荐

  • 解析波士顿动力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