JS 前端实现图片压缩 （转base64）与把base64 压缩转回上传图片格式并上传服务器，减轻大量图片上传占服务器内存，减轻服务器压力

1.上传图片第一步： 引入压缩插件：imagecompress.js

链接如下：https://codeload.github.com/Beckjiang/imageCompress/zip/refs/heads/master

 

 

 

第二步：获取页面上的dom ，上传图片的id

 

第三步，把上传自带的图片进行压缩，且转成Base64位

// 上传文件压缩
$('#csFile').imageCompress({
'quality': 50,
'onloadStart': function(result) {
},
'onloadEnd': function(result){
},
'oncompressStart': function(result){
},
'oncompressEnd': function(result) {
$('#preview').append(result);
$('#preview').find('img').addClass('previewone').css("display","none");
$('#preview').css("display","none");
Base64src = $('.previewone').attr("src");

},
'callback': function(){
// console.log('处理完毕');
}
});

此时，如果打印log，将是转化成base64的图片链接

 

第四步，把转成Base64位转成上传图片文件格式：

//将base64转换为文件
function dataURLtoFile(dataurl, filename) {

let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];

let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], `${filename}.jpg`, {type:mime});
}

 

 

 第5步：  在上传文件的button按钮中进行获取监听：

function  uploadimage（）{

1.获取上传input的id

var filesDom=document.getElementById("csFile").files[0].name;

2.获取上传图片的名字

var imgName=filesDom.split('.')[0];

3.调取把base64转成文件格式的方法

var file = dataURLtoFile(Base64src,imgName);   // 里面的参数分别是图片路径与图片名字

转成上传接口的参数如下：
var fileName = $("#csFile").val();
var form = new FormData();
form.append("file", file);
form.append("employeeId", selfinfos.employeeId);

}

图片如下： 可自行打印能看到图片的内存字节明显变小

 

 ps：在引用的jquery.imagecompress.js 中可修改需压缩多大图片多少k