大家好，我是云浩，话不多说，直接进入正题1、获取输入上传文件（自己获取，或者通过vant的上传组件获取）2、转成base64文件3,压缩4,转换成blob文件5,上传。直接上传下面代码（这段代码段在vue&vantui中使用，原理都有，大家可以根据自己的需要修改）/***uploadfile*/uploadImg(blob,base64){//接收回调function获取压缩后的图片文件并上传constformData=newFormData()//文件名需要加上后缀扩展名，否则会向后端发送一个没有扩展名的文件formData.append('file',blob,'.jpg')formData.append('filename',blob+'.jpg')//我这里封装的api接口，你可以无视，就是上传提交的意思api.uploadImg(formData).then(res=>{console.log(res)})},/***将得到的二进制文件转为base64文件*@paramblob*/blobToBase64(blob){constself=this//bindthisconstreader=newFileReader()//实例化一个读取器文件reader.readAsDataURL(blob)//添加一个二进制文件reader.onload=function(event){constbase64=event.target.result//获取其base64文件constscale=0.99//设置zoomratio(0-1)self.compressImg(base64,scale,self.uploadImg)//调用压缩方法}},/***压缩图片方法*@parambase64----baser64file*@paramscale----压缩比图片质量0-9，数字越小，文件越小，图像质量越差*@paramcallback---回调函数*/compressImg(base64,scale,callback){console.log(`执行缩放程序，scale=${scale}`)//处理缩放，格式转换//下面的注释就不写了，是新图片，canvas是用来压缩constimg=newImage()img.src=base64img.onload=function(){constcanvas=document.createElement('canvas')constctx=canvas.getContext('2d')canvas.setAttribute('width',this.width)canvas.setAttribute('height',this.height)ctx.clearRect(0,0,canvas.width,canvas.height)ctx.drawImage(img,0,0,canvas.width,canvas.height)//converttobase64fileletbase64=canvas.toDataURL('image/jpeg')//根据需要填写大小。我的目标是小于3兆字节while(base64.length>1024*1024*3){scale-=0.01base64=canvas.toDataURL('image/jpeg',scale)}//baser64TOblob如果你不明白这部分大家可以自行百度，我就不加注释了constarr=base64.split(',')constmime=arr[0].match(/:(.*?);/)[1]constbytes=atob(arr[1])constbytesLength=bytes.lengthconstu8arr=newUint8Array(bytesLength)for(leti=0;i
