<input type="file" name="file" id="upload">
    <script>
        const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg']
        const MAXSIZE = 3 *　1024 * 1024
        const MAXSIZE_STR = '3MB'
        
        function converImageToBase64(file, callback){
            let reader = new FileReader();
            reader.addEventListener('load', function(e){
                const base64Image = e.target.result
                callback && callback(base64Image);
                reader = null;
            })
            reader.readAsDataURL(file);
        }

        function compress(base64Image, callback){
            let maxW = 1024
            let maxH = 1024
            const image = new Image()
            image.addEventListener('load', function(e){
                let ratio; // 图片压缩比
                let needCompress = false; // 是否需要压缩

                if(maxW < image.naturalWidth){
                    needCompress = true;
                    ratio = image.naturalWidth / maxW
                    maxH = image.naturalHeight / ratio;
                }
                if(maxH < image.naturalHeight) {
                    needCompress = true;
                    ratio = image.naturalHeight / maxH
                    maxW = image.naturalWidth / ratio
                }
                // 不需要压缩
                if(!needCompress) {
                    maxW = image.naturalWidth
                    maxH = image.naturalHeight
                }
                const canvas = document.createElement('canvas')
                canvas.setAttribute('id', '__compress__')
                canvas.width = maxW;
                canvas.height = maxH;
                canvas.style.visibility = 'visible'
                document.body.appendChild(canvas)

                const ctx = canvas.getContext('2d')
                ctx.clearRect(0,0, maxW, maxH);
                ctx.drawImage(image, 0, 0, maxW, maxH);
                const compressImage = canvas.toDataURL('image/jpeg', 0.8);
                callback && callback(compressImage)
        
                canvas.remove();
            })
            image.src = base64Image
        }

        function uploadToServer(compressImage){
            console.log('uploadToServer', compressImage);
        }

        const upload = document.getElementById('upload')
        upload.addEventListener('change', function(e){
            const [file] = e.target.files;
            console.log(file);
            if(!file) {
                return
            }
            const {type: fileType, size: fileSize} = file
            if (!ACCEPT.includes(fileType)){
                alert(`不支持[${fileType}]文件类型!`);
                upload.value = ''
                return
            }
            if(fileSize > MAXSIZE){
                alert(`文件超出${MAXSIZE_STR}`)
                upload.value = ''
                return
            }

            // 压缩图片
            converImageToBase64(file, (base64Image)=>compress(base64Image, uploadToServer));
            
        })
    </script>

代码来自：https://book.youbaobao.xyz/datav-res/examples/test-compress-img.html