【问题标题】:How to get and post blob from file object如何从文件对象中获取和发布 blob
【发布时间】:2020-06-05 21:54:12
【问题描述】:

我通过我的 component.html 中的 html 输入 on-change 事件获得一个文件对象:

输入 class="hidden" type="file" id="upload-file" name="upload-file" accept=".jpg" ngf-max-size="2MB" (change)="onFileSelected($event) "

在我的 component.ts 中,我将 selectedFile 变量设置为等于 event.target.files[0]。

onFileSelected(event) {
    this.selectedFile = event.target.files[0];
  }

现在我想发出一个 POST 请求来上传数据库中的图像。数据库只除了 (blob) 之类的东西:

“图片”:“/ 9J / 4AAQSkZJRgABAQAAAQABAAD / 2wCEAAYGBgYHBgcICAcKCwoLCg8ODAwODxYQERAREBYiFRkVFRkVIh4kHhweJB42KiYmKjY + NDI0PkxERExfWl98fKcBBgYGBgcGBwgIBwoLCgsKDw4MDA4PFhAREBEQFiIVGRUVGRUiHiQeHB4kHjYqJiYqNj40MjQ + TERETF9aX3x8p // CABEIANABXgMBIQACEQEDEQH / xAAcAAACAgMBAQAAAAAAAAAAAAAFBgQHAQIDCAD / 2gAIAQEAAAAAaTHaJwPDpPPVkCR3GN91FY259JFdl4vYapygk8uyBJrDBKMcjfuMpI2y7q3wJ54kDxRAsePJ ++ 3xsPiobSz12glIZ + QhH4zeRISTkOLvjybfB0muwJ / BvCb9GYVsOVm9tG6duHbG + 6qhzCao6QGxn4rw8 + lKfffzZ6APrhF3RTbtN3EziBFBom2bG2l8os4XJVCVcqzcaqpPY7vFKze4w6fCn6yd28mY619lyqh + mMtoday8w2w8fKJB1cOK55zHWQ / TufnFoFkMaXALUqhw3B9tG1bjP7AICKL1ZB / zzNgTijYAgNsFb42epyWlpVqe4GWUENFudWLss + sNC0xMkcA + P1d9Q7m / UTpnpZwKvepaDcsCwZlbRF / NbrdhuCRyCER0PP2pkIcMct + diefm27Ex +呎+ LWYKrIN05OlyINiUlYLLXYhP24vm4BhQi6CQjw5ROxelc3Gw1VDdHFFngorEv9K357fWNO6o8NmKmVNa0IfW2CgrkMBkiBkc3raubGs5BbiW1TEenTFSOavggUJMqX1ms4oXJjlOIi0NAKpDZJXOpuhht5K / O1ukiSWzXHADOWvuPA5YuxIMndObXESjlgDIA2R1XJRY8qLkp1aBMAXAdyOUIum2KGiIkUEx2EW7jTMTXnXdnLfGT0F62MHRALnEsWvD25NXNcBofqbiGliwNRlf6aNPcf8AK VtmCCryAt0SuirXvumTOGMkzBRxU1EbMlhD + qrZVZ9Tx6toVmMAxUYq1dN14ExweXHtH2sclsKgGuyhZnm1uY1wIwtIh8Rkoo1p3V / FQPmrv3lohrSQgm1kc2xugr7azFM9qcqvclhf6S2A + eM0SLKXxVywx9TKQoSGFvx9B7tdakA3pXzO0Ag4TvHkQOZOzMw1Y6XSfm5RMB2e96bpxoEzRJeR6J6peYAu7qxUSlsec7JrmcuGFHMebY1iUzJ2k2VSy70nGSpe4VrzI9LYn0KgTLmlQYyKRsiq“ P>

我不知道如何将它从文件对象转换为这个字符串。有人可以帮忙吗? 太好了!

【问题讨论】:

    标签: javascript angular ionic-framework image-processing blob


    【解决方案1】:

    你需要做这样的事情来获得 base64 字符串

    在你的 ts 文件上

    imageDisplay: ArrayBuffer;
    
    onFileSelect(event) {
        const reader = new FileReader();
        reader.readAsDataURL(event.target.files[0]);
        reader.onload = () =>
          this.imageDisplay = reader.result;
      }
    

    this.imageDisplay 会给你那个字符串。

    【讨论】:

    【解决方案2】:

    您可以直接将this.selectedFile 数据附加到this.formdata.append('profilePic', this.selectedFile); 等Form 对象中,并将formdata 传递给HTTP 请求。

    【讨论】:

      猜你喜欢
      • 2012-08-06
      • 1970-01-01
      • 2015-01-30
      • 1970-01-01
      • 2013-03-05
      • 2011-07-24
      • 2012-04-07
      相关资源
      最近更新 更多