VUE限制文件上传大小和上传格式

news/2024/7/5 3:44:55
<el-form-item label="图片:" prop="tempImagePath">
  <el-upload
    class="upload"
    accept="image/jpeg"
    :show-file-list="false"
    list-type="picture-card"
    :headers="{ token: token}"
    :action="actionUrl"
    :before-upload="beforeAvatarUpload"
    :on-success="handleAvatarSuccess">
    <img v-if="temp.tempImagePath"
         :src="temp.tempImagePath" width="146px" height="146px"/>
    <i v-else class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">
      只能上传.gif/.jpeg/.png文件且小于500K
    </div>
  </el-upload>
</el-form-item>

 注释:

beforeAvatarUpload (file) {
  const imgType = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt500k = file.size / 1024 / 1024 < 0.48;
  if (!imgType) {
    this.$message.error("上传图片只能是 JPG和png 格式!");
    return false;
  }
  if (!isLt500k) {
    this.$message.error("上传图片大小不能超过 500k!");
    return false;
  }
},


http://lihuaxi.xjx100.cn/news/1830234.html

相关文章

linux 安装yum

问题1&#xff1a;File "/usr/libexec/urlgrabber-ext-down", line 28 except OSError, e: ^ 问题2&#xff1a;yum File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: ^ vim /usr/…

vue 中 keep-alive 组件的作用

Vue中的<keep-alive>组件主要用于缓存不活动的组件实例&#xff0c;而不是销毁它们。当组件在<keep-alive>内时&#xff0c;它的激活和停用状态会被相应的触发。这对于性能优化特别有用&#xff0c;尤其是对于那些需要大量计算或产生大量DOM操作的组件。 在<ke…

后端跟前端讨论:如何对比分析AB方案?

目录 一、结论 二、场景再现 1、方案说明 2、不同思维的碰撞&#xff08;重点&#xff09; &#xff08;1&#xff09;场景描述 &#xff08;2&#xff09;后端思维 &#xff08;3&#xff09;前端思维 3、我作为后端说一句 一、结论 不是在设置相同条件下进行对比。 …

JAVA毕业设计112—基于Java+Springboot+Vue的宠物领养社区小程序(源码+数据库)

基于JavaSpringbootVue的宠物领养社区小程序(源码数据库)112 一、系统介绍 本系统前后端分离带小程序 小程序&#xff08;用户端&#xff09;&#xff0c;后台管理系统&#xff08;管理员&#xff09; 小程序&#xff1a; 登录、注册、宠物领养、发布寻宠、发布领养、宠物社…

C++动态规划算法:最多可以参加的会议数目

本周推荐阅读 C二分算法&#xff1a;得到子序列的最少操作次数 本题的其它解法 C二分算法&#xff1a;最多可以参加的会议数目 II 本文涉及的基础知识点 二分查找算法合集 题目 给你一个 events 数组&#xff0c;其中 events[i] [startDayi, endDayi, valuei] &#xf…

2、git进阶操作

2、git进阶操作 2.1.1 分支的创建 命令参数含义git branch (git checkout -b)<new_branch> <old_branch>表示创建分支-d <-D>删除分支 –d如果分支没有合并&#xff0c;git会提醒&#xff0c;-D强制删除-a -v查看分支-m重新命名分支commit id从指定的commi…

代码随想录-刷题第七天

454. 四数相加II 题目链接&#xff1a;454. 四数相加II 思路&#xff1a;哈希法。使用map集合&#xff0c;key存放ab的值&#xff0c;value存放ab出现的次数。使用两层循环&#xff0c;循环前两个数组&#xff0c;找出ab&#xff0c;对map赋值。再用两层循环&#xff0c;遍历…

requests请求django接口跨域问题处理

参考&#xff1a; https://zhuanlan.zhihu.com/p/416978320 https://blog.csdn.net/SweetHeartHuaZai/article/details/130983179 使用httpx代替requests import httpxheaders {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.3…