Antd react上传图片格式限制
限制分辨率（像素）
<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.length
if (img) {
message.error('只能上传一张图片');
}
const bg = type === 2 && backGroundImage.length
if (bg) {
message.error('只能上传一张图片');
}
const tt = type === 3 && topicImage.length
if (tt) {
message.error('只能上传一张图片');
}
const pi = type === 4 && prizeImage.length
if (pi) {
message.error('只能上传一张图片');
}
const sh = type === 5 && shareImage.length
if (sh) {
message.error('只能上传一张图片');
}
return isJpgOrPng && !img && !bg && !tt && !pi && !sh;
}