iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

Angular 常見問題大小事系列 第 6

Angular 圖片上傳之...日記文

插播

本來預定今天要發佈的文章延後了,今天要要來分享這一兩天的踩雷心路歷,花了一半天時間,連鐵人都沒時間寫,還好有一些些存檔 /images/emoticon/emoticon01.gif

這次公司專案需要做到圖片上傳這部份的處理,因這次的套件對於手動上傳沒有支援太多,所以需要自己處理這部份,接著就是一連串的踩雷過程...


踩雷開始

一般我們在傳檔給後端的時後,都需要把檔案轉為 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);
      })
    );
  }
}

就能同時得到上傳的進度條與 如圖:

這才結束了半天多的踩雷之旅...
嗯...要說是踩雷嗎?也不算是,只能說自己的經驗太少,很少碰到這一部份,也算是繳了學費(時間) /images/emoticon/emoticon46.gif


附錄

這個是之前的遇到的問題。
因為一開始在規劃架構時,有在 interceptors 裡的 http Resquest Headers 加上下面這一行做預設,

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

結果上傳的檔案都變成這種格式

...將上面那一行拿掉就可以成功執行了 /images/emoticon/emoticon20.gif


這篇文,是為了我逝去的青春做記念


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


上一篇
Angular Reactive Form 表單 setValue 與 patchValue 差異
下一篇
程式碼流程規劃之...日記文
系列文
Angular 常見問題大小事31

1 則留言

0
Tim Hsu
iT邦新手 4 級 ‧ 2021-09-17 09:25:01

學習了!!

我要留言

立即登入留言