图片压缩，图片的文件格式转base64/binary(二进制)，base64转图片的文件格式（结合el-upload）、只支持图片格式为JPG、PNG、JPEG的图片

//图片压缩
compress() {
    var that = this
    var img = new Image()
    img.crossOrigin = "Anonymous";
    img.src = "https://dev.3tlife.cn/mobile/static/upload/image/zjl/emp/images/202111309d703d870-0cb3-48e5-9277-c7326639afe1-source.jpg"

    img.onload = function(){
        let canvasWidth = this.width //图片原始长宽
        let canvasHeight = this.height
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d')
        canvas.width = canvasWidth /1
        canvas.height = canvasHeight / 1
        ctx.drawImage(img, 0, 0, canvasWidth / 1, canvasHeight /1)
        canvas.toBlob(function(fileSrc) {
            console.log(fileSrc);
        })
    }
    
},
// 图片的文件格式转base64
getBase64(file) { 
    return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
            imgResult = reader.result;
        };
        reader.onerror = function(error) {
            reject(error);
        };
        reader.onloadend = function() {
            resolve(imgResult);
        };
    });
},

// base64转文件格式
// 调用：that.dataURLtoFile(data, 'headImg.jpg') //把base64 转化成file格式
dataURLtoFile(dataurl, filename) { 
    console.log(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], filename, { type: mime })
},

案例

<el-upload
  class="avatar-uploader"
  action=""
  :auto-upload="false"
  :show-file-list="false"
  :on-change="handleChange"
>
  <img
    v-if="businessForm.licImg"
    :src="businessForm.licImg"
    class="avatar"
  >
  <i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>

handleChange(file, fileList) {
	// 1）大小不超过5M
	// 2）只能上传一张图片
	// 3）上传格式只支持图片格式：JPG、PNG、JPEG
	if (!/\.(jpg|JPG|JPEG|jpeg|png|PNG)$/.test(file.name)) {
	  this.$message.error('只支持图片格式为JPG、PNG、JPEG的图片！')
	  return
	}
	const isLt5M = file.size / 1024 / 1024 < 5
	if (!isLt5M) {
	  this.$message.error('图片大小不能超过 5MB!')
	  return
	}
	this.toCreateObjectURL()
	this.toReadAsDataURL()
	this.toReadAsBinaryString()
	this.torReadAsText()   
},

// 1、createObjectURL：生成一个临时路径展示图片
toCreateObjectURL() {
	this.businessForm.licImg = URL.createObjectURL(file.raw); 
	console.log(this.businessForm.licImg,'this.businessForm.licImg')//blob:http://172.20.35.125:8080/75c0e8e5-3a05-48a7-bb67-61832a4ddd75
}

// 2、图片的文件格式(file.raw) 转 base64
toReadAsDataURL() {
	let reader = new FileReader();
	reader.readAsDataURL(file.raw);
	reader.onload = () => {
	  this.businessForm.licImg = reader.result;//data:image/jpeg;base64,/9j/4AAQSkZJRgABA....
	  // 3、base64 转 图片的文件格式(file.raw) (这边就是举个例子，实际开发不会这样转来转去)
	  let a = this.dataURLtoFile(this.businessForm.licImg, 'hhh')
	  console.log(a,'a');//结果类似于file.raw,但是缺少某些属性
	};
	//不能在这里调用，有可能onload还未执行完，this.businessForm.licImg还没成功赋值
	//let a = this.dataURLtoFile(this.businessForm.licImg, 'hhh')
	//console.log(a,'a');
}

dataURLtoFile(dataurl, filename) { 
   var arr = dataurl.split(',')
   let mime = arr[0].match(/:(.*?);/)[1]
   let bstr = atob(arr[1])
   let n = bstr.length,
   u8arr = new Uint8Array(n)
   while (n--) {
       u8arr[n] = bstr.charCodeAt(n)
   }
   return new File([u8arr], filename, { type: mime })
},

// 3、将文件以二进制形式读入页面
toReadAsBinaryString() {
	var reader = new FileReader();
   reader.readAsBinaryString(file.raw);
   reader.onload = function (f) {
	    var result = document.getElementById("result");
	    //显示文件
	    result.innerHTML = this.result; 
	    console.log(this.result,'this.result;')
   }
}

打印结果：

// 4、将文件以文本形式读入页面
torReadAsText() {
	var reader = new FileReader();
    reader.readAsText(file.raw);
    reader.onload = function (f) {
        var result = document.getElementById("result");
        //显示文件
        result.innerHTML = this.result;
        console.log(this.result,'this.result;')
    }
}

打印结果：