如何透過 API Gateway 將影像或 PDF 檔案上傳到 Amazon S3？

簡短說明

要透過 API Gateway 將影像或 PDF 以二進制檔案格式，上傳到 Amazon S3 儲存貯體，啟動二進制支援。

要授與 API 對 S3 儲存貯體的存取權限，建立 AWS Identity and Access Management (IAM) 角色。此 IAM 角色必須包含可讓 API Gateway 在您的 S3 儲存貯體上執行 PutObject 和 GetObject 動作的權限。

解決方法

建立 API Gateway 的 IAM 角色

1.    開啟 IAM 主控台。

2.    在導覽窗格中，選擇角色。

3.    選擇建立角色。

4.    在選擇信任的實體類型區段，選擇 AWS 服務。

5.    在選擇使用案例區段，選擇 API Gateway。

6.    在選取您的使用案例區段，選擇 API Gateway。

7.    選擇下一步： 權限。
**注意：**此區段顯示允許 API Gateway 將日誌推送到使用者帳戶的 AWS 受管服務。稍後您可以為 Amazon S3 新增權限。

8.    (選用) 選擇下一步： 標籤並新增標籤。

9.    選擇下一步： 檢閱。

10.    在角色名稱，輸入政策名稱。例如：api-gateway-upload-to-s3。

11.    選擇建立角色。

建立 IAM 政策並附加至 API Gateway 角色

1.    開啟 IAM 主控台。

2.    在導覽窗格中，選擇角色。

3.    在搜尋方塊，輸入您建立的新 API Gateway 角色的名稱。然後，從角色名稱欄中選擇該角色。

4.    在角色詳細資料頁面索引標籤上，選擇新增權限。

5.    選擇建立內嵌政策。

6.    在視覺化編輯器索引標籤的選取服務區段，選擇選擇服務。

7.    輸入 S3，然後選擇 S3。

8.    在指定 S3 中允許的動作方塊，輸入 PutObject，然後選擇 PutObject。

9.    輸入 GetObject，然後選擇 GetObject。

10.    展開資源，然後選擇特定。

11.    選擇新增 ARN。

12.    針對儲存貯體名稱，輸入儲存貯體的名稱，並包括前置詞 (如果適用)。

13.    針對物件名稱，輸入物件名稱。
**注意：**儲存貯體名稱會指定上傳檔案的位置。物件名稱會指定物件為了符合政策而必須遵守的模式。如需詳細資訊，請參閱儲存貯體命名規則和 Amazon S3 物件概觀。

14.    選擇新增。

15.    (選用) 選擇下一步： 標籤並新增標籤。

16.    選擇下一步： 檢閱。

17.    針對名稱，輸入政策名稱。

18.    選擇建立政策。

19.    在政策搜尋方塊，輸入您在步驟 17 建立的政策名稱，然後選取該政策。

20.    選擇政策動作，然後選擇附加。然後顯示 IAM 角色清單。

21.    搜尋您先前建立的 API Gateway 角色。然後，選取該角色。

22.    選擇附加政策。

建立 API Gateway REST API

建立 API 以滿足您的請求

1.    開啟 API Gateway 主控台。

2.    在導覽窗格，選擇 API。

3.    選擇建立 API。

4.    在選擇 API 類型區段的 REST API，選擇建置。

5.    針對 API 名稱，輸入 API 名稱，然後選擇下一步。

6.    選擇建立 API。

為您的 API 建立資源

1.    在 API 頁面的資源面板，選取 /。

2.    針對動作，選擇建立資源。

3.    針對資源名稱，輸入 folder。

4.    針對資源路徑，輸入 {folder}。

5.    選擇建立資源。

6.    在資源面板，選取您在步驟 5 建立的 /{folder} 資源。

7.    選擇動作，然後選擇建立資源。

8.    針對資源名稱，輸入 object。

9.    針對資源路徑，輸入 {object}。

10.    選擇建立資源。

為您的 API 建立用於上傳影像或 PDF 的 PUT 方法

1.    選擇動作，然後選擇建立方法。

2.    從下拉式清單選擇 PUT，然後選擇核取記號圖示。

3.    在整合類型類別下，選擇 AWS 服務。

4.    在 AWS 區域，選擇 us-east-1 或您在儲存貯體屬性頁面上看到的 AWS 區域。

5.    針對 AWS 服務，選擇 Simple Storage Service (S3)。

6.    保留 AWS 子網域空白。

7.    針對 HTTP 方法，選擇 PUT。

8.    針對動作類型，選擇使用路徑覆寫。

9.    針對路徑覆寫 (選用)，輸入 {bucket}/{key}。

10.    針對執行角色，輸入您先前建立的 IAM 角色的 ARN。建立 ARN 是建立 IAM 政策並附加至 API Gateway 角色區段的一部分。

11.    針對內容處理，選擇傳遞。

12.    選擇儲存。

為 PUT 方法設定參數映射

1.    在 API 頁面的資源面板，選擇 PUT。

2.    選擇整合請求。

3.    展開網址路徑參數。

4.    選擇新增路徑。

5.    針對名稱，輸入 bucket。

6.    針對映射來源，輸入 method.request.path.folder。

7.    選擇資料列尾端的核取記號圖示。

8.    重複步驟 4–7。在步驟 5，設定名稱為 key。在步驟 6，設定映射來源為 method.request.path.object。

為您的 API 建立用於擷取影像的 GET 方法

1.    在 API 頁面的資源面板，選擇 /{object}。

2.    選擇動作，然後選擇建立方法。

3.    從下拉式清單，選擇 GET，然後選擇核取記號圖示。

4.    在整合類型類別下，選擇 AWS 服務。

5.    針對 AWS 區域，選擇 us-east-1 或您在儲存貯體屬性頁面上看到的區域。

6.    針對 AWS 服務，選擇 Simple Storage Service (S3)。

7.    保留 AWS 子網域空白。

8.    針對 HTTP 方法，選擇 GET。

9.    針對動作類型，選擇使用路徑覆寫。

10.    針對路徑覆寫 (選用)，輸入 {bucket}/{key}。

11.    針對執行角色，輸入您先前建立的 IAM 角色的 ARN。建立 ARN 是建立 IAM 政策並附加至 API Gateway 角色區段的一部分。

12.    針對內容處理，選擇傳遞。

13.    選擇儲存。

為 GET 方法設定參數映射

1.    在 API 頁面的資源面板，選擇 GET。

2.    選擇整合請求。

3.    展開網址路徑參數。

4.    選擇新增路徑。

5.    針對名稱，輸入 bucket。

6.    針對映射來源，輸入 method.request.path.folder。

7.    選擇資料列尾端的核取記號圖示。

8.    重複步驟 4–7。在步驟 5，設定名稱為 key。在步驟 6，設定映射來源為 method.request.path.object。

設定回應映射以在瀏覽器中查看影像或 PDF

1.    在 API 頁面的資源面板，選擇 GET。

2.    選擇方法回應。

3.    展開 200。

4.    在 200 回應內文下，移除 application/json。

5.    在 200 回應標頭下，選擇新增標頭。

6.    針對名稱，輸入 content-type。

7.    選擇核取記號圖示以儲存。

8.    選擇方法執行以返回方法執行面板。

9.    選擇整合回應。

10.    展開 200，然後展開標頭映射。

11.    選擇名稱為 content-type 的資料行尾端的鉛筆圖示。

12.    輸入 image/jpeg 以查看影像檔。
-或者-
輸入 application/pdf 以查看 PDF 檔案。

為 API 設定二進位媒體類型

1.    在 API 頁面的導覽窗格，選擇設定。

2.    在二進位媒體類型區段，選擇新增二進位媒體類型。

3.    在文字方塊，新增下列字串：*/*
**注意：**字串不須加上引號。您可以使用萬用字元以取代要作為二進位媒體類型的特定「多用途網際網路郵件延伸標準」(MIME) 類型。例如，選擇 image/jpeg，讓 API Gateway 將 JPEG 影像視為二進位媒體類型。如果您新增 */*，則 API Gateway 會將所有媒體類型視為二進位媒體類型。

4.    選擇儲存變更。

使用 API 的二進位設定，解決 CORS 錯誤

1.    如果您在 Web 應用程式使用先前提到的 API (PUT 和 GET)，則可能會遇到 CORS 錯誤。如需更多資訊，請參閱 Mozilla 網站的 CORS 錯誤。

2.    要解決開啟二進位設定時的 CORS 錯誤，從 API Gateway 主控台啟動 CORS。

3.    在 API 頁面的資源面板，選取 /{object}。

4.    針對動作，選擇啟用 CORS。

5.    選擇啟用 CORS 並取代現有的 CORS 標頭。

6.    要更新內容處理屬性，執行update-integration CLI 命令。進行此更新，即允許使用模擬整合以處理預檢選項請求的二進位內容。

7.    更新 API ID、資源 ID 和 AWS 區域以執行下列兩個 CLI 命令。要取得 API ID 和資源 ID，從 Gateway API 主控台頂端選取 {object} 資源。

aws apigateway update-integration --rest-api-id API_ID --resource-id RESOURCE_id --http-method OPTIONS --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT' --region AWS_REGION

aws apigateway update-integration-response --rest-api-id API_ID --resource-id RESOURCE_id --http-method OPTIONS --status-code 200 --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT' --region AWS_REGION

部署您的 API

1.    在 API 頁面的導覽窗格，選擇資源。

2.    在資源面板，選擇動作，然後選擇部署 API。

3.    在部署 API 視窗的部署階段，選擇 [New Stage]。

4.    針對階段名稱，輸入 v1。

5.    選擇部署。

6.    在導覽窗格，選擇階段。

7.    選擇 v1 階段。此時會顯示用來向已部署的 API 快照提出請求的叫用 URL。

8.    複製叫用網址。

**注意：**如需詳細資訊，請參閱在 Amazon API Gateway 部署 REST API。

叫用 API 以將影像檔上傳到 S3

將物件的儲存貯體名稱和檔案名稱附加到 API 的叫用網址。然後，使用您選擇的用戶端，發出 PUT HTTP 請求。例如，使用 Postman 外部應用程式時，從下拉式清單選擇 PUT 方法。選擇內文，然後選擇二進位。出現選取檔案按鈕時，選取要上傳的本機檔案。

如需詳細資訊，請參閱在 Amazon API Gateway 叫用 REST API。

發出 PUT HTTP 要求以上傳影像或 PDF 的範例 curl 命令

在下列範例中，**abc12345 ** 是您的 API ID，testfolder 是您的 S3 儲存貯體，而 testimage.jpeg 是您上傳的本機檔案：

curl -i --location --request PUT 'https://abc12345.execute-api.us-west-2.amazonaws.com/v1/testfolder/testimage.jpeg' --header 'Content-Type: text/plain' --data-binary '@/Path/to/file/image.jpeg'

**重要事項：**如果二進位媒體類型清單包含 */*，則可以發出 PUT 請求以上傳檔案。如果二進位媒體類型清單包含 image.jpeg，則必須將 content-type 標頭新增到 PUT 請求 。您必須設定 content-type 標頭為 image/jpeg。

您現在可以在有相同網址的 Web 瀏覽器，看到影像或 PDF，因為 Web 瀏覽器發出 GET 請求。

相關資訊

使用 API Gateway REST API 啟動二進位支援