fileupload结合image-conversion按比例压

在项目中遇到需要在上传图片之前按比例压缩宽高和质量，实现完成记录一下
fileupload所需库及api：(https://github.com/blueimp/jQuery-File-Upload/wiki/API)
缩图片参考的文档：掘金地址和github的api

知识点：
在add回调里重新调用.fileupload 可以传递额外的参数或者覆盖原需要上传的文件

$(".file-upload").fileupload({
                                  fileInput: res,
                                    formData: {
                                        name: res
                                    }
                                })

imageConversion.compress方法在掘金里作者已说明这里就不赘述了
在done方法里主要写上传成功之后回调 回显到页面上 暂时有错误 等代码修改之后重新修改文章

$(".file-upload").fileupload({
                url: "XXXXXXXX",
                dataType: 'json',
                add: function (e, data) {
                    const file = data.files[0];
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var imgurl = e.target.result;
                        //加载图片获取图片真实宽度和高度
                        var image = new Image();
                        image.onload = function () {
                            var width = image.width > 500 ? 500 : image.width;
                            var height = image.width > 500 ? 500 / image.width * image.height : image.height;
                            //压缩图片
                            imageConversion.compress(file, {
                                quality: 0.8,
                                width: width,
                                height: height,
                            }).then(res=> {
                                //压缩成功后重新上传
                                console.log(res);
                                $(".file-upload").fileupload({
                                    fileInput: res,
                                    formData: {
                                        name: res
                                    }
                                })
                                $("#logining").show();
                                data.submit();
                            })
                        };
                        image.src = imgurl;
                    };
                    reader.readAsDataURL(file);

                    
                },
                done: function (e, rep) {
                    var response = rep.result;
                    if (response.code == 0) {
                        var imageDomId = e.target.id.replace(/^file-/g, "");
                        if (imageDomId == "defaultimg") {
                            //新增图片
                            $("#defaultimg").attr("src", "http://" + response.data);
                            $("#fileSrc").val(response.data)
                            $("#logining").hide();

                        }
                    } else {
                        alert("上传失败:" + response.message);
                        $("#logining").hide();
                    }
                },
                fail: function () {
                    alert("上传失败:" + response.message);
                    $("#logining").hide();
                }
            });