upload 获取图片的宽高
时间: 2023-10-14 19:58:38 浏览: 27
要获取上传图片的宽高,可以在上传之前的方法中进行处理。据引用和引用的代码,可以使用Promise来判断图片的宽高是否符合要求。首先,定义一个Promise对象,通过创建一个Image对象,并设置其onload事件回调函数来获取图片的宽高。然后,根据宽高的大小进行判断,如果符合要求就resolve,否则就reject。在上传图片的方法中,引用的代码可以提供获取图片宽高的思路,通过FileReader对象的readAsDataURL方法将文件转换为DataURL,并创建一个Image对象来获取宽高。最后,可以在获取到宽高后进行相应的操作。
相关问题
el-upload怎么获取图片宽高
el-upload可以通过调用getImgInfo方法获取图片的宽高。getImgInfo是一个导出的函数,它接受一个文件参数,并返回一个Promise对象。在函数内部,首先创建一个Image对象,并通过URL.createObjectURL方法将文件对象转换为URL。然后,设置Image对象的onload事件处理函数,在图片加载完成后获取图片的宽高,并将这些参数包装成一个对象返回。如果加载过程中发生错误,可以通过设置Image对象的onerror事件处理函数来处理错误情况。
在beforeUpload方法中,可以调用getImgInfo方法,并将文件对象作为参数传入。通过await关键字可以等待getImgInfo方法的返回结果,然后将结果保存在fileInfo变量中。通过fileInfo对象可以获取到图片的宽高信息。
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`替换为您真实的上传接口地址。