el-upload上传图片限制图片宽高比例
时间: 2023-06-28 14:16:25 浏览: 118
【JavaScript源代码】vue el-upload上传文件的示例代码.docx
您可以通过设置 `beforeUpload` 方法来限制图片的宽高比例。在 `beforeUpload` 方法中,您可以使用 `FileReader` 对象来读取图片文件,然后获取其宽高比例,如果不符合要求,则返回 `false` 来阻止上传。
以下是一个示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:before-upload="handleBeforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleBeforeUpload(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
const img = new Image()
img.src = reader.result
img.onload = () => {
const width = img.width
const height = img.height
if (width / height !== 2) { // 限制宽高比例为2
this.$message.error('图片宽高比例必须为2')
reject()
} else {
resolve()
}
}
}
})
}
}
}
</script>
```
在上面的代码中,我们限制了图片的宽高比例为2。您可以根据需要修改宽高比例的值。
阅读全文