vue+vant 实现图片压缩

vue+vant 实现图片压缩

直接上代码：

只支持上传单张图片，对单张图片进行压缩：

<van-field name="uploader1" label="上传附件:">
                  <template #input>
                    <van-uploader v-model="uploader1"
                                  style="margin-right: 10px"
                                  :after-read="beforeRead1"
                                  accept="image/gif, image/jpeg, image/png"
                                  :max-count="1"
                                  upload-text="身份证人像面"
                                  upload-icon="plus">
                    </van-uploader>
                    <van-uploader v-model="uploader2" :after-read="beforeRead2"
                                  accept="image/gif, image/jpeg, image/png"
                                  :max-count="1"
                                  upload-text="身份证国徽面"
                                  upload-icon="plus"/>
                  </template>
                </van-field>

  data(){
	 return{
	        uploader1: [],
	        uploader2: [],
	        fileObj1:{},
	        fileObj2:{},
     }，
      methods:{
	      beforeRead1(file) {
		          console.log('身份证正面file1，未压缩前的图片', file);
		          if (file.file.size > 200*1024) { //如果图片大于200K就进行压缩
		            const canvas = document.createElement('canvas') // 创建Canvas对象(画布)
		            const context = canvas.getContext('2d')
		            const img = new Image()
		            img.src = file.content // 指定图片的DataURL(图片的base64编码数据)
		            img.onload = () => {
		              canvas.width = img.width
		              canvas.height = img.height
		              context.drawImage(img, 0, 0, img.width, img.height)
		              file.content = canvas.toDataURL(file.file.type, 0.8) // 0.92为默认压缩质量
		              const files = this.dataURLtoFile(file.content, file.file.name)
		              console.log('文件读取完成后执行 进行图片压缩',files)
		              this.fileObj1=files.file
		              console.log('压缩后的文件',this.fileObj1)
		            }
		          }else{
		            this.fileObj1=file.file
		            console.log('不需要压缩的图片',this.fileObj1)
		          }
        },
        dataURLtoFile (dataurl, filename) { // 将base64转换为file文件
          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)
          }
          let file = new File([u8arr], filename, {type: mime})
          const data = { //拼成你所需要传给后端的格式
            file:file,
            content:dataurl,
            message:'',
            status:''
          }
          return data
        },
     }
 }