elementplus上传图片获取图片宽高

### 使用 Element Plus 获取上传图片宽高的方法 在使用 Element Plus 实现文件上传功能时，可以通过监听 `on-success` 或者自定义逻辑来处理已上传的图片资源。为了获取图片的宽度和高度，可以利用 JavaScript 原生的方法加载图片并读取其尺寸。 以下是基于 Vue3 和 Element Plus 的实现示例： #### 示例代码 ```vue <template> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" :on-success="handleSuccess"> <el-button type="primary">点击上传</el-button> </el-upload> </template> <script> import { ElMessage } from 'element-plus'; export default { methods: { handleBeforeUpload(file) { const isImage = file.type.startsWith('image/'); if (!isImage) { ElMessage.error('仅支持上传图片'); return false; } return true; // 返回true表示允许继续上传 }, handleSuccess(response, file) { this.getImageDimensions(file.raw); // 调用获取图片宽高的方法 }, getImageDimensions(imageFile) { const img = new Image(); const reader = new FileReader(); reader.onload = (event) => { img.src = event.target.result; img.onload = () => { console.log(`图片宽度: ${img.width}px, 高度: ${img.height}px`); ElMessage.success(`图片大小为: ${img.width}x${img.height}`); }; }; reader.readAsDataURL(imageFile); } } }; </script> ``` --- #### 解析说明 上述代码实现了以下功能： 1. **限制上传文件类型** 在 `handleBeforeUpload` 方法中判断文件是否为图片类型[^1]。如果不符合条件，则阻止上传操作。 2. **成功回调中的处理逻辑** 当文件上传完成后触发 `on-success` 回调函数，在此阶段调用了 `getImageDimensions` 方法用于解析图片的实际宽高[^3]。 3. **动态加载图片数据** 利用 `FileReader` 将图片文件转换成 Data URL 格式，并创建一个新的 `<img>` 对象加载该数据源。当图片完全加载完毕后，即可访问其 `width` 和 `height` 属性[^2]。 --- #### 注意事项 - 如果服务器返回的是图片的真实存储路径而非临时链接，请确保替换掉默认的模拟 API 地址 (`https://jsonplaceholder.typicode.com/posts/`) 并指向实际的服务端接口。 - 图片加载过程中可能会遇到跨域问题，需确认服务端配置了正确的 CORS 头部信息以便客户端能够正常预览或分析图像内容。 ---