Angular 图片上传之...日记文

插播

本来预定今天要发布的文章延後了，今天要要来分享这一两天的踩雷心路历，花了一半天时间，连铁人都没时间写，还好有一些些存档

这次公司专案需要做到图片上传这部份的处理，因这次的套件对於手动上传没有支援太多，所以需要自己处理这部份，接着就是一连串的踩雷过程...

踩雷开始

一般我们在传档给後端的时後，都需要把档案转为 Binary 上传文件的格式，

如图：

因为这次上传的是图片，所以也一起将 http Resquest Headers 里的 responseType 改为 blob (注 1)
改 blob 後，发现回传的 response 变这样

取不到後端给我的 success 资料

如图：

因为我需要 success 後，後端回给我的的 imageId 才能接续打下一支 api

在公司试了好久，也把所想得到的关键字都喂给估狗，一直找不到原因。
到家後，为了重现情境 还到了 imgur 图床申请档案上传 api，搞了好久後，终於好了
结果 imgur 一直报 429 (*注 2) 给我就是一直没办法传，大吐血！！！明明我就刚才申请好！！
然後...时间好晚了，放弃先睡觉，隔天再到公司试。

後来才发现将 responseType 改为 text

createImage(formData: any) {
  return this.httpClient
    .post(url, formData, {
      responseType: 'text', //这里
      reportProgress: true,
      observe: 'events',
      withCredentials: true,
    })
    .pipe(
      tap(event => {
        console.log('createImage', event);
      })
    );
  }
}

就能同时得到上传的进度条与 如图：

这才结束了半天多的踩雷之旅...
嗯...要说是踩雷吗？也不算是，只能说自己的经验太少，很少碰到这一部份，也算是缴了学费(时间)

附录

这个是之前的遇到的问题。
因为一开始在规划架构时，有在 interceptors 里的 http Resquest Headers 加上下面这一行做预设，

'Content-Type': contentType || 'application/json'

结果上传的档案都变成这种格式

...将上面那一行拿掉就可以成功执行了

这篇文，是为了我逝去的青春做记念

注 1：XMLHttpRequest.responseType
注 2：the server responded with a status of 429 (Too Many Requests) intlTelInput.js