Layui通過質量比例壓縮圖片並上傳

示例中使用的是Layui 2.5.6版本，需要的請到官網下載

首先添加上傳圖片的按鈕控件：

<button type="button" class="layui-btn" style="margin-top: 10px;width: 100%" id="upload">
    <i class="layui-icon">&#xe67c;</i>上傳圖片
</button>

然後再JS中初始化Layui並引入upload模塊：

<script>
    //一般直接寫在一個js文件中
    layui.use(['layer','form','upload'], function(){
        $ = layui.jquery;
        var layer = layui.layer
            ,form = layui.form
            ,upload = layui.upload;
            
        function canvasDataURL(file, callback) { //壓縮轉化爲base64
            var reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = function (e) {
                const img = new Image()
                const quality = 0.2 // 圖像質量比例
                const canvas = document.createElement('canvas')
                const drawer = canvas.getContext('2d')
                img.src = this.result
                img.onload = function () {
                    canvas.width = img.width
                    canvas.height = img.height
                    drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
                    convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
                }
            }
        }

        function convertBase64UrlToBlob(urlData, callback) { //將base64轉化爲文件格式
            const arr = urlData.split(',')
            const mime = arr[0].match(/:(.*?);/)[1]
            const bstr = atob(arr[1])
            let n = bstr.length
            const u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            callback(new Blob([u8arr], {
                type: mime
            }));
        }

        upload.render({
            elem: '#upload' //綁定元素
            ,url: 'XXXXXX' //上傳接口
            ,accept : 'images'		//上傳文件類型
            ,auto :false  //是否自動上傳，這裏如果在choose中壓縮圖片則一定要設置爲false否則會無限上傳
            ,size : 6144	//上傳文件大小限制，單位KB
            ,field : 'img'	//上傳文件的字段名
            ,choose: function (obj) { //選擇文件後的回調
                var files = obj.pushFile();
                var filesArry = [];
                for (var key in files) { //將上傳的文件轉爲數組形式
                    filesArry.push(files[key])
                }
                var index = filesArry.length - 1;
                var file = filesArry[index]; //獲取最後選擇的圖片,即處理多選情況

                if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
                    .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
                    return obj.upload(index, file)
                }
                canvasDataURL(file, function (blob) {
                    var aafile = new File([blob], file.name, {
                        type: file.type
                    })
                    var isLt1M;
                    if (file.size < aafile.size) {
                        isLt1M = file.size
                    } else {
                        isLt1M = aafile.size
                    }

                    if (isLt1M / 1024 / 1024 > 2) {
                        return layer.alert('上傳圖片過大！')
                    } else {
                        if (file.size < aafile.size) {
                            return obj.upload(index, file)
                        }
                        obj.upload(index, aafile)
                    }
                })
            }
            ,done: function(res){
                if(res.code==0)
                    layer.alert(res.msg, {icon: 6},function (thiswindow) {
                        layer.close(thiswindow);
                    });
                else
                    layer.alert(res.msg, {icon: 5},function (thiswindow) {
                        layer.close(thiswindow);
                    });
            }
            ,error: function(){
                layer.msg("上傳失敗");
            }
        });

        
    });
</script>