图片上传时获取图片的宽和高
时间: 2023-12-31 18:04:39 浏览: 41
在图片上传时,可以使用JavaScript的FileReader对象读取图片文件,然后通过创建一个Image对象来获取图片的宽和高。以下是一个示例代码:
```javascript
// 获取文件
var file = document.getElementById("fileInput").files[0];
// 创建FileReader对象
var reader = new FileReader();
// 读取文件
reader.readAsDataURL(file);
// 当文件读取完成时
reader.onload = function(event) {
// 创建Image对象
var img = new Image();
img.src = event.target.result;
// 当图片加载完成时
img.onload = function() {
// 获取图片的宽和高
var width = img.width;
var height = img.height;
// 在此处进行后续操作
}
}
```
需要注意的是,获取图片的宽和高需要在图片加载完成后进行,因此需要使用Image对象的onload事件来监听图片加载完成的事件。
相关问题
el-upload 上传之前获取图片宽高
您可以使用`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`替换为您真实的上传接口地址。
el-upload上传图片怎么获取图片宽高
在el-upload上传图片后,可以通过以下步骤获取图片的宽高:
1. 在html部分,使用el-upload组件,并设置相应的属性和事件。
2. 在script部分,定义一个uploadFile函数来处理上传文件的操作。
3. 在uploadFile函数中,创建一个FileReader对象,通过readAsDataURL方法将文件转换成Base64格式。
4. 当读取完成后,通过创建一个Image对象,并将Base64数据赋值给image.src属性。
5. 在Image对象加载完成后,可以获取到图片的宽度和高度,可以根据需求进行相应的判断和操作。