el-upload上传图片的大小限制
时间: 2023-06-30 21:17:25 浏览: 178
el-upload 组件的大小限制可以通过设置属性来实现。具体来说,你可以使用 `before-upload` 属性来检查上传的文件是否符合要求。在这个函数中,你可以访问到上传的文件对象,从而判断文件的大小是否符合要求。
以下是一个示例,演示了如何限制上传的图片大小不得超过 2MB:
```html
<el-upload
:before-upload="handleBeforeUpload"
>
<el-button>上传图片</el-button>
</el-upload>
```
```javascript
methods: {
handleBeforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!')
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
}
return isJPG || isPNG && isLt2M
}
}
```
在上面的示例中,我们通过判断文件的类型和大小来限制上传的图片大小。如果文件类型不符合要求或文件大小超过 2MB,就会提示用户错误信息,并且不会上传该文件。如果文件符合要求,则返回 true,继续上传该文件。
阅读全文