1.前端开发时总是遇到要压缩图片的问题
前端的处理是
通过把file 转换成 base64格式 然后再传给后端
第一种 前端把file 转换成 base64路径格式 直接传给后台,后台自己进行解码处理
第二种 前端把file 转换成 base64路径格式 ,然后再转换为file 格式(二进制格式)然后传给后台,后台按file处理
项目中遇到的是由于后台格式接受文件格式为file "Content-Type": "multipart/form-data"
所以前端用第二种处理
//压缩图片为Base64路径格式
const Base64 = (img) =>{
let originWidth = img.width,
originHeight=img.height,
maxWidth = 1000, maxHeight = 1000,
quality = 0.5, // 压缩质量
canvas = document.createElement('canvas'),
drawer = canvas.getContext("2d");
canvas.width = maxWidth;
canvas.height = originHeight/originWidth*maxWidth;
drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
let base64 = canvas.toDataURL("image/jpeg", quality); // 压缩后的base64图片
//console.log(base64)
let file = dataURLtoFile(base64,Date.parse(Date())+'.jpg');
file={content:base64,file:file};
return file
}
//把base64转file 二进制流
const dataURLtoFile = (dataurl,filename) =>{
let 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);
}
return new File([u8arr],filename,{type:mime});
}
//上传时调用uploadImg即可
uploadImg(file){
let img = new Image();
img.src = file.content;
img.onload=()=>{
let file = this.Base64(img);
this.uploaFile(file);
}
}
uploaFile(file) {
let formData = new window.FormData();
formData.append('file', file.file);
return axios.post('/upload',formData,{
headers:{
"Content-Type": "multipart/form-data"
}
})
}