vant上传图片压缩

vant上传图片压缩

// HTML部分
    <template>
               <div>
                          <van-cell title=“上传图片" value=“(拍摄1-4张图片)” />
                          <van-uploader
                                 v-model="fileList"
                                 :before-read="beforeRead"
                                 :after-read="afterRead"
                                 :before-delete="beforeDelete"
                                 :max-size="10*1024*1024"
                                 upload-text=“拍照上传"
                                multiple
                                :max-count="4"
                                @oversize="uploaderOversize"
                                @click-preview="clickPreview"
               </div>
    </template>
    // JS部分
    export default{
              data(){
                    
              },
              methods:{
                    afterRead(file,detail){
                             if(file.file.size>2000000){. // 判断图片大于2M就压缩
                                        let num=Math.sqrt(2000000/file.file.size) // 获取图片的压缩比例
                                        let canvas=document.createElement('canvas')
                                        let context=canvas.getContext('2d')
                                        let img=new Image()
                                        img.onload=()=>{
                                                  canvas.width=img.width*num //把上传的图片宽度乘以压缩比例
                                                  canvas.height=img.height*num // 把上传的图片高度乘以压缩比例
                                                  context.drawImage(img,0,0,img.width*num,img.height*num)
                                                  file.context=canvas.toDataURL(file.file.type,1) // 比例传1，也有的传0.92但是感觉压缩得太厉害了
                                                  let files=this.dataURLtofile(file.content,file.file.name)
                                                  let params=new FormData();
                                                  params.append('file',files)
                                                  params.append('isPermission','N')
                                                  comApi.uploadFile(params).then((res)=>{ // 这里的comApi是自己封装的接口请求方法，根据自己实际去更改
                                                            if(res.status==200){
                                                                       let picture={}
                                                                       picture.index=detail.index
                                                                       picture.attachmentId=res.DATA.attachId
                                                                       picture.attachmentName=res.DATA.attachName
                                                                       file.status='done'
                                                                       this.allfileList.push(picture) //将图片数据push到这个数组中在上传接口中使用
                                                            }else{
                                                                    file.status=‘failed’
                                                                    file.message=‘上传失败’
                                                            }
                                                  }).catch((err)=>{
                                                                 file.status='failed'
                                                                 file.message=‘上传失败'
                                                                this.$toast.fail(‘上传失败')
                                                  })
                                        } 
                             }else{ //当图片小于2M时就正常上传
                                       let params=new FormData()
                                       params.append('file',file);
                                       params.append('isPermission','N')
                                       comApi.uploadFile(params).then((res)=>{}).catch((err)=>{}) // 内容和上面的一样，这里就省略了
                             }
                    }，
                    // 图片压缩方法
                    dataURLtoFile(dataurl,filename){
                             let arr=dataurl.split(',')
                             let mime=arr[0].match(/:(.*?);/)[1]
                             let bstr=atob(arr[1])
                             let n=bstr.length
                             let u8arr=new Uint8Array(n)
                             while(n—){
                                  u8arr[n]=bstr.charCodeAt(n)
                             }
                             return new File([u8arr],filename,{type:mime})
                    }
              }
    }