element-ui 上传图片限制格式

本文介绍了一个Vue.js中用于检查图片上传格式和大小的函数。该函数确保上传的图片为JPG或PNG格式,并且大小不超过10MB。通过错误消息反馈不符合条件的上传尝试。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    beforeAvatarUpload(file) {
      this.loading = true
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
      }
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10MB!');
      }
      return (isJPG || isPNG) && isLt10M;
    },

### element-ui 中设置图片上传限制 #### 文件大小和类型的限制 为了实现文件大小和类型的限制,在 `el-upload` 组件中可以通过 `before-upload` 属性来定义一个函数,该函数会在每次文件上传前被调用。在这个函数内部可以编写逻辑来验证文件类型以及检查文件大小。 ```javascript // JavaScript 函数用于在上传之前执行自定义校验 function beforeAvatarUpload(file) { const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPGorPNG) { this.$message.error('仅支持 JPG 和 PNG 格式图片!'); } if (!isLt2M) { this.$message.error('图片大小不得超过 2MB!'); } return isJPGorPNG && isLt2M; } ``` 此代码片段展示了如何利用 `before-upload` 来控制允许上传的文件格式为 `.jpg`, `.jpeg`, 或者`.png` 并且最大尺寸不超过2 MB[^2]。 #### HTML 配置 在HTML部分,则需确保 `<el-upload>` 的标签内包含了上述提到的相关属性: ```html <el-upload class="avatar-uploader" action="/api/upload" :show-file-list="false" :before-upload="beforeAvatarUpload"> </el-upload> ``` 这里设置了 `class`、`action`(指定服务器端接收请求地址),并绑定了 `before-upload` 到前面创建好的方法上。 #### 处理其他事件 除了基本的文件筛选外,还可以监听更多有用的回调事件比如 `on-exceed` 当超出数量上限时触发;`on-success` 成功完成一次上传之后触发;`on-remove` 用户手动移除某个已选文件时触发等。这些功能可以帮助构建更加完善可靠的用户体验[^1]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值