elementUI设置上传图片的格式、大小限制

在使用ElementUI的上传组件时，可以通过设置属性来限制上传图片的格式和大小。

1. 格式限制：

可以使用accept属性来设置上传图片的格式。该属性接受一个字符串，表示允许上传的文件类型，可以使用文件后缀名或MIME类型。例如，如果只允许上传jpg和png格式的图片，可以设置accept属性为”image/jpeg,image/png”。

“`

<el-upload

…

:accept=”‘image/jpeg,image/png'”

>

…

“`

2. 大小限制：

可以使用before-upload属性来设置上传图片的大小限制。该属性接受一个函数，用于在上传文件之前进行判断。函数的参数是当前要上传的文件对象，可以通过判断文件的大小来限制上传的图片大小。例如，如果只允许上传小于1MB的图片，可以设置before-upload属性为一个函数，并在函数内进行判断。

“`

<el-upload

…

:before-upload=”beforeUpload”

>

…

“`

然后在Vue实例中定义beforeUpload方法：

“`

methods: {

beforeUpload(file) {

const isLt1M = file.size / 1024 / 1024 < 1;

if (!isLt1M) {

this.$message.error(‘上传图片大小不能超过1MB!’);

}

return isLt1M;

}

}

“`

在beforeUpload方法中，通过判断文件的大小是否小于1MB，返回一个布尔值来决定是否上传文件。如果文件大小超过了限制，则给出错误提示并返回false，阻止文件上传。

通过以上配置，可以对上传图片的格式和大小进行限制。