看了之前大部分的上传方法，大部分都是使用canvas的toDataURL（兼容性好）方法，然后转成文件对象放到formdata里面。其实canvas还有一个方法就是toBlob，File对象继承自Blob对象。也就是Blob对象的属性和方法。functiondataURLtoFile(dataurl,filename){//将base64转换为文件对象letarr=dataurl.split(',')letmime=arr[0].match(/:(.*?);/)[1]letbstr=atob(arr[1])让n=bstr。lengthletu8arr=newUint8Array(n)while(n--){u8arr[n]=bstr.charCodeAt(n)}returnnewFile([u8arr],filename,{type:mime})}处理图片的方法常规方法使用定义的dataURLtoFile方法functionhandleImg(file){//用filereader实现图片预览letread=newFileReader()read.readAsDataURL(file)returnnewPromise(function(resolve,reject){read.onload=function(e){让img=newImage()img.src=e.target.resultimg.onload=function(){//创建画布letcanvas=document.createElement('canvas')letctx=canvas.getContext('2d')canvas.width=this.widthcanvas.height=this.heightctx.drawImage(this,0,0,this.width,this.height)//与此处不同//方案一是常用方法letbase64=canvas.toDataURL(file['type'],1)letfiles=dataURLtoFile(base64,file.name)resolve(files)//方案二直接使用blobcanvas.toBlob(function(blob){blob.lastModifiedDate=newDate().getTime();blob.name=file.nameresolve(blob)},file['type'],1)}}})}最后当我们上传handleImg时调用方法，可以返回处理后的imgasyncfunctionupload(){letformData=newFormData()let_file=awaithandleImg('我是需要上传的img')formData.append('file[]',_file,_file.name)//调用上传接口}最后调用接口直接上传即可。这是上传的时候。使用第二种方法时，必须加上参数_file.name，因为浏览器是在上传过程中给我们的参数。文件流自动命名为blob，所以会导致上传的文件名不正确的问题
