vue图片压缩不失真_vue中实现图片压缩 file文件的方法

项目中遇到上传图片需要在前端进行图片压缩，将我的实现思路记录一下。(我已经拿到上传的file文件的前提下)

先创建一个公用的js，这里我的是api.js，里面封装一些常用的方法

将图片压缩的方法写到这个公用的js(api.js)中

//base64转码(压缩完成后的图片为base64编码，这个方法可以将base64编码转回file文件)

function dataURLtoFile(dataurl) {

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);

}

return new File([u8arr], { type: mime });

}

//压缩图片

function compressImg(file){

var src;

var files;

var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);

var read = new FileReader();

read.readAsDataURL(file);

return new Pro