上传base64图片并压缩

elementUI+react

布局

　　　　　　　　　<Dialog
                    title="充值"
                    visible={ dialogVisible }
                    onCancel={ () => this.setState({ dialogVisible: false }) }
                >
                    <Dialog.Body>
                        <Form labelWidth="120" ref={ e => {this.form=e} } model={ form } rules={ rules }>
                            <Form.Item label="支付凭证" prop="voucher">
                                <div className="my-upload">
                                <input className="upload-input" type="file" id="input" name="file1" onChange={ this.inputfile } />
                                { voucher ? <img src={ voucher } className="avatar"  /> : <i className="el-icon-plus avatar-uploader-icon" /> }
                                </div>
                            </Form.Item>
                        </Form>
                    </Dialog.Body>
                    <Dialog.Footer className="dialog-footer">
                        <Button onClick={ () => this.setState({ dialogVisible: false }) }>{‘取 消‘}</Button>
                        <Button type="primary" onClick={ this.saveContent } loading={ btnLoading }>{‘确 定‘}</Button>
                    </Dialog.Footer>
                </Dialog>

完整方法：

　　beforeAvatarUpload(file) {
        const isJPG = file.type === ‘image/jpeg‘
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
            Message(‘上传头像图片只能是 JPG 格式!‘)
        }
        if (!isLt2M) {
            Message(‘上传头像图片大小不能超过 2MB!‘)
        }
        return isJPG && isLt2M
    }　　// input onchange上传方法
    inputfile =()=> {
        const file1 = document.querySelector(‘#input‘).files[0]
        // const flag = this.beforeAvatarUpload(file1)
        // if(!flag){
        //     return false
        // }
        console.log(file1)
        const that=this
    if(file1){
      var reader = new FileReader()
                    // 图片文件转换为base64
            reader.readAsDataURL(file1)
            reader.onload = function(){
                // 显示图片
                // document.getElementById(‘file1_img‘).src = this.result
                // that.setState({
                //     voucher:this.result
                // })
                that.dealImage(this.result, 800, that.printing)
            }
    }
    }　　//回调方法
    printing = base64 => {
        // console.log(‘压缩后‘, base64.length / 1024)
        this.setState({
            voucher: base64
        })
    }
    //压缩方法
    dealImage = (base64, w, callback) => {
        var newImage = new Image()
        //压缩系数0-1之间
        var quality = 0.6
        newImage.src = base64
        newImage.setAttribute(‘crossOrigin‘, ‘Anonymous‘)    //url为外域时需要
        var imgWidth, imgHeight
        newImage.onload = function () {
            imgWidth = this.width
            imgHeight = this.height
            var canvas = document.createElement(‘canvas‘)
            var ctx = canvas.getContext(‘2d‘)
            if (Math.max(imgWidth, imgHeight) > w) {
                if (imgWidth > imgHeight) {
                    canvas.width = w
                    canvas.height = w * imgHeight / imgWidth
                } else {
                    canvas.height = w
                    canvas.width = w * imgWidth / imgHeight
                }
            } else {
                canvas.width = imgWidth
                canvas.height = imgHeight
                quality = 0.6
            }
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
            var ba = canvas.toDataURL(‘image/jpeg‘, quality) //压缩语句
            // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
            // while (base64.length / 1024 > 150) {
            //     quality -= 0.01;
            //     base64 = canvas.toDataURL("image/jpeg", quality);
            // }
            // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
            // while (base64.length / 1024 < 50) {
            //     quality += 0.001;
            //     base64 = canvas.toDataURL("image/jpeg", quality);
            // }
            callback(ba) //必须通过回调函数返回，否则无法及时拿到该值
        }
    }

原文地址：https://www.cnblogs.com/wang715100018066/p/11434214.html