前端之图片上传压缩

方法一：

  缺点：图片质量模糊---修改了一下，清晰度模糊一点，但是可以看清

HTML代码 

 <input
        type="file"
        :id="id"
        class="inputfile"
        v-show="false"
        multiple
        accept="image/*;"
        ref="inputfile"
        @change="addImg($event)"
      />

上传图片 

addImg(e) {
      //添加图片。此方法乃h5调用，适用于ios拍照+相册，android只有相册选取.
      console.log(e);
      if (
        this.imgcount == this.imgcounttotal ||
        this.imgcount == this.imglimittotal
      ) {
        Toast("已达最大图片数量");
        return;
      }
      if (e.target !== this.$refs.fileinput) {
        e.preventDefault();
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) {
          return;
        } else if (files.length >= 2) {
          Toast("仅允许单张添加");
          return;
        }

        const file = files[0];
        this.addImgPreview(file, e);
        e.target.value = ""; // 清除input数据
      }
    },
 

 上传内容判断

 addImgPreview(file, e) {
      // 添加缩略图
      let self = this;
      // 是否支持不支持FileReader
      if (!file || !window.FileReader) return;
      if (/^image/.test(file.type)) {
        Indicator.open("添加中...");
        // 创建一个reader
        let reader = new FileReader();
        // 将图片将转成 base64 格式,并保存在reader中
        reader.readAsDataURL(file);
        // 读取成功后的回调
        reader.onload = function (oFREvent) {
          const base64Url = oFREvent.target.result;
          const fileStreamSize = self.calculaFileSize(base64Url);
          let name = file.name;
          let compressAfterImgUrl = "";
          let compressAfterImgSize = "";
          let img = self.createNewImg(base64Url);
          if (fileStreamSize >= 204800) {
            console.log(fileStreamSize);
            // Toast('上传图片过大，应小于200k') // 取小压缩，给出提示
            // return
            try {
              // self.compressImg3(file);
              // var img1 = self.compressImg(img);
              // var compressAfterImgUrl1 = self.calculaFileSize(compressAfterImgUrl);
              // console.log(compressAfterImgUrl);
              // while (compressAfterImgUrl1 >= 204800) {
              //   img1 = self.compressImg(img1);
              //   compressAfterImgUrl1 =
              //     self.calculaFileSize(compressAfterImgUrl1);
              //   console.log(compressAfterImgUrl1);
              // }
              // com