这个问题本身不复杂，难点在于需要改 layui 的源码。
HTML略。
网页的JS域：
layui.use([‘upload‘,‘element‘,‘layer‘], function(){ ???var upload = layui.upload,element = layui.element,layer = layui.layer; ???upload.render({ ???elem: ‘#test8‘ ???,url: ‘upload‘ ???,async: false ???,method: ‘post‘ ???,data: { ???????upgradeType: function(){ ???????return $("input[name=‘upgradeType‘]:checked").val(); ???????} ???} ???,auto: false ???,xhr:xhrOnProgress ???,progress:function(value){//上传进度回调 value进度值 ???????element.progress(‘demo‘, value+‘%‘)//设置页面进度条 ???} ???,accept: ‘file‘ //普通文件 ???,exts: ‘zip‘ //只允许上传压缩文件 ???,field:‘uploadFile‘ ???,bindAction: ‘#test9‘ ???,choose: function(obj){ ???????var uploadFileInput=$(".layui-upload-file").val(); ???????var uploadFileName=uploadFileInput.split("\\"); ???????$("#uploadName").text(uploadFileName[uploadFileName.length-1]); ???} ???,before: function(obj){ ???????layer.load(); //上传loading ???} ???,done: function(res){ ???????layer.msg("上传成功"); ???} ???,error: function(index, upload){ ???????element.progress(‘demo‘, ‘0%‘); ???????layer.msg(‘上传失败‘); ???} ???});});//创建监听函数 ????var xhrOnProgress=function(fun) { ???????xhrOnProgress.onprogress = fun; //绑定监听 ????????//使用闭包实现监听绑 ???????return function() { ???????????//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 ???????????var xhr = $.ajaxSettings.xhr(); ????????????//判断监听函数是否为函数 ?????????????if (typeof xhrOnProgress.onprogress !== ‘function‘) ??????????????????return xhr; ??????????????//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 ???????????????if (xhrOnProgress.onprogress && xhr.upload) { ?????????????????????xhr.upload.onprogress = xhrOnProgress.onprogress; ???????????????} ???????????????return xhr; ????????} ????}可以考虑把 xhrOnProgress 放在一个库里面，但不知道能不能直接放到Layui的源码里面。
然后就是重点了：改 layui 源码。
upload.js :
...//默认配置 ?Class.prototype.config = { ???accept: ‘images‘ //允许上传的文件类型：images/file/video/audio ???,exts: ‘‘ //允许上传的文件后缀名 ???,auto: true //是否选完文件后自动上传 ???,bindAction: ‘‘ //手动上传触发的元素 ???,url: ‘‘ //上传地址 ???,field: ‘file‘ //文件字段名 ???,method: ‘post‘ //请求上传的http类型 ???,data: {} //请求上传的额外参数 ???,drag: true //是否允许拖拽上传 ???,size: 0 //文件限制大小，默认不限制 ???,number: 0 //允许同时上传的文件数，默认不限制 ???,multiple: false //是否允许多文件上传，不支持ie8-9 ???,xhr:function(){} ?};...$.ajax({ ???url: l.url ???,type: l.method ???,data: formData ???,contentType: false ????,processData: false ???,dataType: ‘json‘ ???,xhr:l.xhr(function(e){//此处为新添加功能 ????????var percent=Math.floor((e.loaded / e.total)*100);//计算百分比 ????????l.progress(percent);//回调将数值返回 ????}) ????,success: function(res){ ????????successful++; ????????done(index, res); ????????allDone(); ????} ????,error: function(e){ ????????console.log(e) ????????aborted++; ????????that.msg(‘请求上传接口出现异常‘); ????????error(index); ????????allDone(); ????}});...需要修改的地方标红了。
这样就完成了，写上传业务的时候不管有没有写xhr参数都可以正常提交。
参考：https://blog.csdn.net/lin452473623/article/details/80785180
layui 魔改：上传时的真实进度条
原文地址：https://www.cnblogs.com/foxcharon/p/9520238.html