vue2 图片从不是jpg的格式转换为.jpg格式

<template>
  <div class="a">
    <input type="file" @change="changeAdd($event)" :multiple="false">
    <div>
      <img :src="ada" alt="" style="width:200px;">
    </div>
    <button @click="upLoad">上传</button>


  </div>
</template>

<script>
let self;
import * as imageConversion from 'image-conversion'
export default {
  data() {
    return {
      ada:"",
    }
  },
  
  methods: {
    upLoad(){

    },
    changeAdd(e){
      self = this;
      let mb= 1024*1024*0.5;
      let file = e.target.files[0];
      // let name = file.name.slice(-3)
      let isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (isJpgOrPng) {
        console.log('图片已经是 JPG 或 PNG 格式，不需要转换');
        if (file.size>mb) {
            this.yaSuo(file);
          }else{
            console.log('文件大小小于500kb,不需要压缩')
          }
      }else{
        var imgFile = new FileReader();
        try {
              imgFile.onload = function (e) {
                  var image = new Image();
                  image.src = e.target.result; //base64数据 
                  image.onload = function () {
                      self.imgToCanvas(image);
                  }
              }
              imgFile.readAsDataURL(file);
        } catch (e) {
              console.log("请上传图片！" + e);
        }
      }
      var reader = new FileReader();
      reader.onload = function (e) {
        self.ada = e.target.result;       
      };
      //选择图片文件后即时预览图片
      reader.readAsDataURL(file);
    },
    async yaSuo(file){
        // 压缩到100KB,这里的100就是要压缩的大小,可自定义
      await imageConversion.compressAccurately(file,500).then(res => {
        console.log('======') 
        // 把blob转换为文件
        let a =new File([res], `${file.name}`, { type: res.type });
        let blob = new Blob([res], { type: 'image/jpeg' });
        this.ada = window.URL.createObjectURL(blob);
        console.log(res,a, this.ada)
      });
    },
    // 把image 转换为 canvas对象 
    imgToCanvas(image) {
          var canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          canvas.getContext("2d").drawImage(image, 0, 0);
          this.canvasToImg(canvas);
          // return canvas;
      },
    //canvas转换为image
    canvasToImg(canvas) {
          //这个src是图片的base64流数据 一定要经过转换以后再转为文件 否则的话传给后端会出错
          var src = canvas.toDataURL("image/jpeg");
          this.ada = src;
          let arr = src.split(',');
          let mime = arr[0].match(/:(.*?);/)[1]  //设置file文件流的type名称
          let suffix = mime.split('/')[1]  //设置file文件流的name名称
          // atob 对经过 base-64 编码的字符串进行解码
          let bstr = window.atob(arr[1]);
          // n 是解码后的长度
          let n = bstr.length;
          // Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0
          let u8arr = new Uint8Array(n);
          // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          // new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
          // 第三个参数是 要放到文件中的内容的 MIME 类型
          let file=new File([u8arr], `${filename}.${suffix}`, {
            type: 'image/jpeg',
          });
          console.log('格式转换以后的图片',file,this.ada)
          let mb= 1024*1024*0.5;
          if (file.size>mb) {
            this.yaSuo(file);
          }else{
            console.log('文件大小小于500kb,不需要压缩')
          }
          // this.yaSuo(file);
          // return src;
      }, 
  },
  mounted() {
  },
}
</script>