600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > antd upload 图片上传前压缩

antd upload 图片上传前压缩

时间:2024-02-10 07:31:54

相关推荐

antd  upload 图片上传前压缩

onChange = (files, type, index) => {const newItem = _.cloneDeep(this.state.imgData);if (type === "add") {const file = [...files].pop().file;const newitem = [...files].pop(); // 多次上传之前的数据const handle = this.handleUPdata; // 图片上传接口// 限制上传十兆以上图片if (file.size > 10 * 1024 * 1024) {Toast.fail("请上传10M以下的图片!");return;}// 更新状态this.setState({files,loading: true,});// 压缩一兆以上图片if (file.size > 1 * 1024 * 1024) {let rate = 0.2;let reader = new FileReader();reader.readAsDataURL(file);let img = new Image();reader.onload = function (e) {img.src = e.target.result;};img.onload = function () {let canvas = document.createElement("canvas");let context = canvas.getContext("2d");// 文件大小KBconst fileSizeKB = Math.floor(file.size / 1024);// console.log('file size:', fileSizeKB, 'kb');// 配置rate和maxSize的关系if (fileSizeKB * rate > 3027) {rate = Math.floor((3027 / fileSizeKB) * 10) / 30;}// 缩放比例,默认0.5let 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) => {const newImage = new File([blob], file.name, {type: file.type,});// console.log(newImage.size / 1024, "kb");// 图片上传接口handle([{file: newImage }]); });};} else {// 图片没有超限则直接上传handle(files);// 图片上传接口}} else {// 图片移除逻辑}};

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。