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