开始先很明确地说明，IE9及以下的IE浏览器或者旧版Edge请使用其它现成的JS上传插件代替layui的上传插件。
思路是在上传组件的上传前的回调中进行操作。
在回调中使用官方文档所说的重新上传方法，看了layui.upload.js的源码后发现，只要传入的file是文件数据就可以替换选中要上传的文件数据。那么剩下就是对图片进行压缩，我这里就不进行复杂的图片压缩计算，只进行压缩宽高80%的操作。直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<link href="layui/css/layui.css" rel="stylesheet" />
</head>
<body>
这是首页
<span id="span_upload" class="layui-btn">上传</span>
<img id="img_res" />
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(['upload'], function () {
var $ = layui.jquery, upload = layui.upload;
var IsImgDeal = false;//标记图片是否处理了
var uploadIns = upload.render({
elem: '#span_upload'
, url: '/upload/Pic'
, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
//可能处理方法写在choose会好些，就留给大家测试看哪个合适了
if (IsImgDeal) {
return;//图片处理过就直接上传
}
console.log(1);
var files = obj.pushFile();
var file_tar = null,index_tar = null;
for (var k in files) {
index_tar = k;
file_tar = files[k];
break;
}
//进行图片压缩，直接百度压缩方法
let reader = new FileReader();
var filename = file_tar.name;
reader.readAsDataURL(file_tar);
reader.onload = function () {
let content = this.result; //图片的src，base64格式
let img = new Image();
img.src = content;
img.onload = function () { //图片加载完毕
let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
let width = Math.ceil(img.width*0.8);
let height = Math.ceil(img.height*0.8);
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);//压缩图片尺寸
let dataURL = canvas.toDataURL("image/jpeg");//如果是需要质量压缩就补充参数
//将base64数据转化为文件对象
var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
IsImgDeal = true;//设置标记
//如果有时差问题，后面setTimeout延时再执行，让原来的上传终止
obj.upload(index_tar, new File([new Blob([u8arr], { type: mime })], filename));//单独上传
//uploadIns.upload();//重新启动全部文件上传
}
};
layer.load(); //上传loading
//停止原本的上传，如果多个文件，需要在读取完毕后将files里面的文件队列全删除。
return delete files[index_tar];
}
, done: function (res, index, upload) {
layer.closeAll('loading'); //关闭loading
//这里根据后台相应的返回值进行不同的逻辑处理
if (res["status"] == 1) {
$("#img_res").attr("src", res["data"]);
}
else {
console.log(res);
}
IsImgDeal = false;
}
, error: function (index, upload) {
layer.closeAll('loading'); //关闭loading
IsImgDeal = false;
}
});
});
</script>
</body>
</html>原图片大小。
压缩上传后的大小。
