const beforeUpload = (file) => {
// const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
// if (!isJpgOrPng) {
// message.error('You can only upload JPG/PNG file!');
// }
// const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isLt2M) {
// message.error('Image must smaller than 2MB!');
// }
return new Promise((resolve, reject) => {
// 图片压缩
let reader = new FileReader(), img = new Image();
reader.readAsDataURL(file);
reader.onload = function (e) {
img.src = e.target.result;
}
img.onload = function () {
let rate = 0.2;
// 文件大小KB
const fileSizeKB = Math.floor(file.size / 1024);
console.log('fileSizeKB', fileSizeKB)
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
// let originWidth = this.width;
// let originHeight = this.height;
// canvas.width = originWidth;
// canvas.height = originHeight;
// context.clearRect(0, 0, originHeight, originHeight);
// context.drawImage(img, 0, 0, originHeight, originHeight);
// 缩放比例,默认0.5
let targetW = (canvas.width = this.width * rate);
let targetH = (canvas.height = this.height * rate);
context.clearRect(0, 0, targetW, targetH);
context.drawImage(img, 0, 0, targetW, targetH);
canvas.toBlob((blob) => {
let imgFile = new File([blob], file.name, {type: file.type}); // 将blob对象转化为图片文件
console.log(Math.floor(imgFile.size / 1024))
resolve(imgFile);
}, file.type, rate); // file压缩的图片类型
}
})
};
react antd upload beforeUpload 压缩图片
最新推荐文章于 2024-07-18 22:13:37 发布