限制分辨率（像素）
<a-upload
:before-upload="beforeUpload">// 上传图片宽高比例限制const beforeUpload = file => {return new Promise((resolve, reject) => {// // 图片类型限制// let isJpgOrPng = file.type === 'image/png' || file.type === 'image/jpg';// if (!isJpgOrPng) {// message.error('格式错误，只能上传jpg、jpeg、png');// return reject(false);// }// 图片宽高比例限制let w = 0,h = 0;let reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {const image = new Image();image.src = reader.result;image.onload = () => {w = image.width;h = image.height;const ratio = 670 / 320;if (w / h == ratio) {// 图片比例为670*320横纵比一致return resolve(true);} else {message.error('图片尺寸错误，只能上传670x320横纵比一致的图片');return reject(false);}};};// 图片大小限制let isLt1M = file.size / 10240 / 10240 <= 1;if (!isLt1M) {message.error('图片大小超过10MB!');return reject(false);}// return isJpgOrPng && isLt1M; // 限制宽高比例、大小及类型return isLt1M; // 只限制宽高和大小});};new FileReader(); new Image();
获取图片上传的像素宽高
AI解释
`new FileReader();` 是 JavaScript 中用于读取文件的一个构造函数。它创建了一个 `FileReader` 对象，能够异步读取本地文件的数据（如文本、图像等），将其以不同格式返回。### 主要用途：
1. **异步读取文件**：可以从用户选择的文件中读取数据，而不会阻塞主线程。文件读取操作是异步的，即使文件很大，用户仍然可以继续与页面交互。2. **支持多种格式**：`FileReader` 可以以多种格式读取文件，例如：- `readAsText(file)`：读取文件为文本。- `readAsDataURL(file)`：读取文件为 Data URL（如图像文件），可用于图像展示。- `readAsArrayBuffer(file)`：读取文件为 ArrayBuffer，用于处理二进制数据。### 在代码中的使用：
在你的代码中，`new FileReader()` 被用来创建一个新的 `FileReader` 对象，以便读取用户上传的文件。接下来，你设置了 `onload` 事件处理程序，在文件读取完成后执行相关操作（例如创建一个 `Image` 对象来检查图像的尺寸）。以下是一个简化的流程说明：
1. 用户选择文件（例如图像）。
2. 创建 `FileReader` 实例。
3. 使用 `reader.readAsDataURL(file)` 方法开始读取文件，该方法异步读取内容，并在完成后触发 `onload` 事件。
4. 在 `onload` 事件处理程序中，使用读取的结果（图像数据）进行尺寸检查。其他限制，大小，数量
const beforeUpload = (file, type,width, height) => {console.log('file=======',file)const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {message.error('请上传正确的图片格式');}const isLt2M = file.size / 1024 / 1024 < 2;const isLt300 = file.size / 1024 < 300;const isLt50 = file.size / 1024 < 50;if(type===1){// 限制图片像素宽高const width = 4836;const height = 3844;return new Promise((resolve, reject) => {let reader = new FileReader();console.log("reader===",reader)reader.addEventListener('load',() => {let img = new Image();img.src = reader.result; img.onload = () => {if (img.width < width || img.height < height) {message.error('请上传宽高大于等于 4836*3844 的封面图！');reject(new Error('请上传宽高大于等于 4836*3844 的封面图！'));return;} else {resolve();}};},);reader.readAsDataURL(file);}).catch(() => {return false;})}if (type === 1 && !isLt2M) {message.error('图片大小不能超过2MB');return false}if ((type === 2 || type === 3 || type === 5) && !isLt300) {message.error('图片大小不能超过300KB');return false}if (type === 4 && !isLt50) {message.error('图片大小不能超过50KB');return false}const img = type === 1 && coverImage.lengthif (img) {message.error('只能上传一张图片');}const bg = type === 2 && backGroundImage.lengthif (bg) {message.error('只能上传一张图片');}const tt = type === 3 && topicImage.lengthif (tt) {message.error('只能上传一张图片');}const pi = type === 4 && prizeImage.lengthif (pi) {message.error('只能上传一张图片');}const sh = type === 5 && shareImage.lengthif (sh) {message.error('只能上传一张图片');}return isJpgOrPng && !img && !bg && !tt && !pi && !sh;}
