vue或h5中使用input转base64上传图片

效果展示

图片压缩展示

vue

1.先定义一个input输入框，然后用label标签指定输入框输入内容

<input type="file" id="cameraInput" accept="image/*" style="display:none" 
  @change="handleFileChange" />
<label class="tabimg" for="cameraInput">照片选择</label>

2.加入handleFileChange方法

 handleFileChange(event) {
                var that = this;
                this.files = event.target.files;
                for (let i = 0; i < this.files.length; i++) {
                    const file = this.files[i];
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        let img = new Image(); // 先创建图片对象
                        img.src = this.result;
                        let canvas = document.createElement('canvas');
                        let ctx = canvas.getContext('2d');
                        img.onload = function () { 
                            // 图片加载完后
                            // 做适配 
                            let width = 650;
                            if (img.width < 650) {
                                width = img.width;
                            }
                            canvas.width = width;
                            canvas.height = (img.height / img.width) * width;
                            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                            //压缩图片质量(0~1)
                            let imgResult = canvas.toDataURL(file.type, 0.5);
                            that.img = imgResult;
                            //imgResult就是最后压缩完成的base64图片
                        };
                    };
                    reader.readAsDataURL(file);
                }
            },

3.去掉前缀，以base64传入接口

this.img.replace(/^data:image\/\w+;base64,/, ""),

h5

1.去掉了方法

<input type="file" id="cameraInput" accept="image/*" multiple style="display:none">
<label  class="tabimg" for="cameraInput"></label>

2.在script加入原生方法

 setTimeout(() => {
    $(document).on("change", "#cameraInput", function (event) {
        const files = event.target.files;
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const reader = new FileReader();
            reader.onload = function (e) {
                let img = new Image(); 
                img.src = this.result;
                let canvas = document.createElement('canvas');
                let ctx = canvas.getContext('2d');
                img.onload = function () { 
                    let width = 650;
                    if (img.width < 650) {
                        width = img.width;
                    }
                    canvas.width = width;
                    canvas.height = (img.height / img.width) * width;
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
                    let imgResult = canvas.toDataURL(file.type, 0.5);

                    const searchParams = new URLSearchParams(location.search);
                    const base64 = e.target.result;
                    let fordata = new FormData();
                    fordata.set('idNumber', searchParams.get('idNumber'));
                    fordata.set('projectId', searchParams.get('projectId'));
                    fordata.set('type', file.type.substring(file.type.lastIndexOf("/") + 1));
                    fordata.set('base64', imgResult.replace(/^data:image\/\w+;base64,/, ""));
                    fordata.set('attendanceType', searchParams.get('cr'));
                    var xhr;
                    try {
                        xhr = new XMLHttpRequest();
                    } catch (e) {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xhr.open('POST', '接口地址', true);
                    xhr.send(fordata);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            vant.Toast('图片添加成功');
                            
                        }
                    }
                };
            };
            reader.readAsDataURL(file);
        }
    });
}, 2000);