el-upload 上传之前获取图片宽高
时间: 2023-08-25 16:15:28 浏览: 142
图片上传前显示
您可以使用`el-upload`的`before-upload`事件来获取图片的宽高。在`before-upload`事件中,您可以通过`FileReader`来读取图片文件,并使用`Image`对象获取图片的宽高信息。
以下是一个示例代码:
```html
<template>
<el-upload
:action="uploadUrl"
:before-upload="handleBeforeUpload"
>
<el-button slot="trigger">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
uploadUrl: '/your-upload-url',
};
},
methods: {
handleBeforeUpload(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const width = img.width;
const height = img.height;
// 在这里可以获取到图片的宽高
console.log(`宽度:${width}px,高度:${height}px`);
resolve(file);
};
img.onerror = reject;
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
},
},
};
</script>
```
在上述示例中,`handleBeforeUpload`方法会在上传文件之前被调用。它使用`FileReader`读取图片文件,并创建一个`Image`对象来获取宽高信息。在`img.onload`回调中,您可以拿到图片的宽高,并进行相应的处理。
请注意将代码中的`/your-upload-url`替换为您真实的上传接口地址。
阅读全文