el-upload上传图片限制分辨率小于1080p

### 在 el-upload 中设置图片上传分辨率限制为小于 1080p 的方法 在前端框架中，`el-upload` 是 Element Plus 提供的一个用于文件上传的组件。虽然该组件本身没有直接提供限制图片分辨率的功能，但可以通过自定义校验逻辑来实现这一需求。 以下是一个完整的解决方案，包括如何在 `el-upload` 中添加自定义校验以确保上传的图片分辨率小于 1080p（即宽度或高度不超过 1920x1080 像素）[^1]。 #### 实现步骤 1. **监听 `before-upload` 钩子** 使用 `el-upload` 的 `before-upload` 钩子函数，在文件上传之前对文件进行预处理和校验。 2. **创建图片解析函数** 创建一个辅助函数，用于读取图片文件并解析其分辨率。 3. **校验分辨率** 如果图片分辨率超过指定限制，则阻止上传并提示用户。 #### 示例代码 ```vue <template> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :before-upload="checkResolution" :on-success="handleSuccess" :on-error="handleError"> <el-button type="primary">点击上传</el-button> <template #tip> <div class="el-upload__tip">请确保图片分辨率小于 1080p (1920x1080)</div> </template> </el-upload> </template> <script> export default { methods: { checkResolution(file) { const reader = new FileReader(); const image = new Image(); return new Promise((resolve, reject) => { reader.onload = (event) => { image.src = event.target.result; image.onload = () => { const { width, height } = image; if (width <= 1920 && height <= 1080) { resolve(); // 分辨率符合要求，允许上传 } else { this.$message.error("图片分辨率必须小于 1080p (1920x1080)"); reject(); // 阻止上传 } }; }; reader.onerror = () => { this.$message.error("无法读取图片文件"); reject(); // 阻止上传 }; reader.readAsDataURL(file); // 将文件转换为 Data URL }); }, handleSuccess(response, file, fileList) { this.$message.success("上传成功"); }, handleError(err, file, fileList) { this.$message.error("上传失败"); } } }; </script> ``` #### 注意事项 - 上述代码中使用了 `FileReader` 和 `Image` 对象来解析图片分辨率。这是前端常见的图片处理方式[^1]。 - 如果需要支持 IE 浏览器，需注意 `FileReader` 和 `Promise` 的兼容性问题。 - 在实际应用中，建议结合后端进一步校验文件内容，以防止恶意攻击或前端校验被绕过。 --- ###