求助大神 重复调用blobToDataURL的时候 会触发FileReader的error 还有重复同一张照片也有一些图片会触发error 是要清除什么东西吗 有什么解决办法吗

m0_52152932 2021-06-22 17:14:07
blobToDataURL (blob) {
      console.log(blob);
      var reader ;
      return new Promise((resolve, reject) => {
        reader = new FileReader()
        reader.addEventListener('error', (err) => {
          console.log(err);
          reject(err)
        })
        console.log(111);
        reader.addEventListener('load', () => {
          resolve(reader.result) // reader.result即为包含文件内容的字符串
        })
        reader.readAsDataURL(blob)
      })
    },
canvasDataURL(path, obj, callback) {
      let img = new Image();
      img.src = path;
      let vuethis = this;
      img.onload = function() {
        let that = this;
        // 默认按比例压缩
        let w = that.width;
        let h = that.height;
        let scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        let quality = 0.7; // 默认图片质量为0.7
        // 生成canvas
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        // 创建属性节点
        let anw = document.createAttribute("width");
        anw.nodeValue = w;
        let anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
        }
        // quality值越小,所绘制出的图像越模糊
        let base64 = canvas.toDataURL(vuethis.file.type, quality);
        // 回调函数返回base64的值
        callback(base64);
      };
    },
    convertBase64UrlToBlob(urlData) {
        let arr = urlData.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 Blob([u8arr], { type: mime });
    },
async islimit1M(isLt1M, file) {
      console.log(isLt1M);
      console.log(file);
      console.log(++this.count);
      let re = null;
      if (!isLt1M) {
        console.log("0000");
        re = await this.blobToDataURL(file);
        console.log("149",re);
        this.canvasDataURL(re, { width: 600, height: 600, quality: 1 }, async (base64Codes) => {
          //file = this.convertBase64UrlToBlob(base64Codes);
          //console.log("file", file);
          //if(file.size / 1024 /1024 >1){
            //var re1 = null;
            //re1 = await this.blobToDataURL(file);
            //console.log(re1);
          //}
            this.canvasDataURL(base64Codes, { width: 550, height: 550, quality: 1 },(base64) => {
            console.log(base64);
            file = this.convertBase64UrlToBlob(base64);
            console.log("file", file.size / 1024 / 1024);
            let fd = new FormData();
            fd.append("file", file, this.file.name); // 第三个参数,设置文件的名称(可选的)
            fd.append("id", this.id);
            for (var pair of fd.entries()) {
              console.log(pair[0]+ ', ' + pair[1]);
              if(pair[0] === "file") {
                console.log(pair[1].name);
                console.log(pair[1].type);
                console.log(pair[1].size / 1024 / 1024);
              }
            }
            // 提交FormData类型数据
            // 更新父组件中的头像
            Updateuseravatar(fd).then(res => {
              if (res.code == 200) {
                this.$emit("updateavatar", res.result);
                this.$toast.success("上传成功");
                this.$emit("close");
              } else {
                console.log(res);
                this.$toast.fail("上传失败");
                this.$emit("close");
              }
            }).catch(err => {
              console.log(err);
              this.$toast.fail("上传失败");
              this.$emit("close");
            });
          });
        });
      } else {
          let fd = new FormData();
          fd.append("file", file, this.file.name); // 第三个参数,设置文件的名称(可选的)
          fd.append("id", this.id);
          // 提交FormData类型数据
          // 更新父组件中的头像
          Updateuseravatar(fd).then(res => {
            if (res.code == 200) {
              this.$emit("updateavatar", res.result);
              this.$refs.image = null;
              this.$emit("close");
              this.$toast.success("上传成功");
            } else {
              this.$toast.fail("上传失败");
              this.$emit("close");
            }
          }).catch(err => {
            console.log(err);
            this.$toast.fail("上传失败");
            this.$emit("close");
          });
      }
    }

 

...全文
518 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,988

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧