前端上传图片之前先压缩图片大小_前端文件上传前压缩多大-CSDN博客

本文链接：https://blog.csdn.net/g_geng/article/details/122111528

本文介绍了一个前端实现的图片上传功能，包括对图片格式的验证、压缩处理及上传过程中的状态更新。通过使用FileReader API读取图片数据并调整图片大小以优化上传效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 async getFrontIdCard(file, type, index) {
        if (type == 'add') {
            let imgSize = file[file.length - 1].file.size;
            let imgType = file[file.length - 1].file.type;
            console.log(imgType, "imgType")
            if (imgType.indexOf('png') == -1 && imgType.indexOf('jpg') == -1 && imgType.indexOf('jpeg') == -1) {
                Toast.fail('请上传格式为JPG或PNG,jpeg类型的图片', 2, null, false)
            } else {
                if (file && file.length > 0) {
                    this.setState({
                        uploadLoading: true
                    })
                    let fileContent = file[file.length - 1].file;
                    this.setMiniImg(fileContent, 1)
                }
            }
        } else {
            this.setState({
                files: [],
                idCardFront: ''
            })
        }
    }
    
setMiniImg = (file, stepInfo) => {
        let self = this;
        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");
            // 文件大小KB
            const 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.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) => {
                const newImage = new File([blob], file.name, {
                    type: file.type,
                });
                console.log(newImage, newImage.size, "kb");
                // 图片上传接口
                self.uploadByInfo(newImage, stepInfo)
            });
        };
    }```