AWS re:Post Knowledge Center Feedback Survey

Help us improve the AWS re:Post Knowledge Center by sharing your feedback in a brief survey. Your input can influence how we create and update our content to better support your AWS journey.

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

6 分的閱讀內容

我想使用 Amazon API Gateway 將影像或 PDF 檔案上傳到 Amazon Simple Storage Service (Amazon S3)，然後進行擷取。

簡短描述

若要使用 API Gateway 將影像或 PDF 作為二進位檔案上傳到 Amazon S3 儲存貯體，請啟用二進位支援。

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

解決方法

**注意：**如果您在執行 AWS Command Line Interface (AWS CLI) 命令時收到錯誤訊息，請參閱對 AWS CLI 錯誤進行疑難排解。此外，請確定您使用的是最新的 AWS CLI 版本。

建立 API Gateway 的 IAM 角色

請完成下列步驟：

開啟 IAM console (IAM 主控台)。
在導覽窗格中，選擇角色。
選擇 Create role (建立角色)。
在 Trusted entity type (受信任實體的類型) 中，選擇 AWS service (AWS 服務)。
在 Service or use case (服務或使用案例) 中，選擇 API Gateway。
在 Use case (使用案例) 中，選擇 API Gateway。
選擇 Next (下一步)。然後，再次選擇 Next (下一步)。
在 Role name (角色名稱) 中，輸入您政策的名稱。例如，輸入 api-gateway-upload-to-s3。
(選用) 若要為 IAM 角色新增標籤，請選擇 Add new tag (新增標籤)。
選擇 Create role (建立角色)。

建立 IAM 政策，並將其附加到 API Gateway 角色

請完成下列步驟：

開啟 IAM console (IAM 主控台)。
在導覽窗格中，選擇 Roles (角色)。
在搜尋方塊中，輸入 API Gateway 的 IAM 角色名稱，然後從 Role name (角色名稱) 欄中選取該角色。
在 Permissions policies (權限政策) 區段中，選擇 Add permissions (新增權限)，然後選擇 Create inline policy (建立內嵌政策)。
在 Visual editor (視覺化編輯器) 索引標籤的 Select a service (選取服務) 區段，選擇 Choose a service (選擇服務)。
輸入 S3，然後選擇 S3。
在 Actions allowed (允許的動作) 下，輸入 PutObject，然後選擇 PutObject。輸入 GetObject，然後選擇 GetObject。
展開 Resources (資源)，然後選擇 Specific (特定)。
選擇 Add ARN (新增 ARN)。
在 Resource bucket name (資源儲存貯體名稱) 中，輸入您儲存貯體的名稱。如果適用，請包含首碼。
在 Resource object name (資源物件名稱) 中，輸入物件名稱。
**注意：**儲存貯體名稱會指定上傳檔案的位置。物件名稱會指定物件為了符合政策而必須遵守的模式。如需詳細資訊，請參閱一般用途儲存貯體命名規則和 Amazon S3 物件概觀。
選擇 Add ARNs (新增 ARN)。
選擇 Next (下一步)。
在 Name (名稱) 中，輸入您政策的名稱。
選擇 Create policy (建立政策)。

建立 API Gateway REST API

若要建立 API 以傳遞您的請求，請完成下列步驟：

開啟 API Gateway console (API Gateway 主控台)。
在導覽窗格中，選擇 API。
選擇 Create API (建立 API)。
在 Choose an API type (選擇 API 類型) 頁面的 REST API 中，選擇 Build (建置)。
在 API Name (API 名稱) 中，輸入您 API 的名稱，然後選擇 Create API (建立 API)。

若要為 API 建立資源，請完成下列步驟：

在 API 頁面的 Resources (資源) 面板，選取 /。
選擇 Create resource (建立資源)。
在 Resource path (資源路徑) 中，選擇 /。
在 Resource name (資源名稱) 中，輸入 {bucket}。
注意： Bucket 是使用者可以變更的變數名稱。
選擇 Create resource (建立資源)。
在 Resources (資源) 面板中，選取 /{bucket} 資源。
選擇 Create resource (建立資源)。
在 Resource path (資源路徑) 中，選擇 /{bucket}/。
在 Resource name (資源名稱) 中，輸入 {proxy+}。
選擇 Create resource (建立資源)。

若要為 API 建立 PUT 方法來上傳影像或 PDF 檔案，請完成下列步驟：

在 Methods (方法) 區段中，選擇 Create method (建立方法)。
在 Method type (方法類型) 中，選擇 PUT。
在 Integration type (整合類型) 下，選擇 AWS service (AWS 服務)。
在 AWS Region (AWS 區域) 中，選擇 us-east-1，或 Bucket properties (儲存貯體屬性) 頁面上的 AWS 區域。
在 AWS service (AWS 服務) 中，選擇 Simple Storage Service (S3)。
將 AWS subdomain (AWS 子網域) 保持空白。
在 HTTP method (HTTP 方法) 中，選擇 PUT。
在 Action type (動作類型) 中，選擇 Use path override (使用路徑覆寫)。
在 Path override (路徑覆寫) 中，輸入 {bucket}/{proxy}。
在 Execution role (執行角色) 中，輸入 IAM 角色的 Amazon Resource Name (ARN)。
在 Content handling (內容處理) 中，選擇 Passthrough (傳遞)。
選擇 Create method (建立方法)。

為 PUT 方法設定參數對應

請完成下列步驟：

在 API 頁面的 Resources (資源) 面板，選擇 PUT。
選擇 Integration Request (整合請求)，然後選擇 Edit (編輯)。
展開 URL path parameters (網址路徑參數)。
選擇 Add path parameter (新增路徑參數)。
在 Name (名稱) 中，輸入 bucket (儲存貯體)。
在 Mapped from (對應來源) 中，輸入 method.request.path.bucket。
重複執行步驟 4-6，但在步驟 5，將 Name (名稱) 設定為 key (索引鍵)。在步驟 6 中，將 Mapped from (對應來源) 設為 method.request.path.proxy。
選擇 Save (儲存)。

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

請完成下列步驟：

在 API 頁面的 Resources (資源) 面板，選擇 /{object}。
在 Methods (方法) 區段中，選擇 Create method (建立方法)。
在 Method type (方法類型) 中，選擇 GET。
在 Integration type (整合類型) 下，選擇 AWS service (AWS 服務)。
在 AWS Region (AWS 區域)，選擇 us-east-1，或 Bucket properties (儲存貯體屬性) 頁面上的區域。
在 AWS service (AWS 服務) 中，選擇 Simple Storage Service (S3)。
將 AWS subdomain (AWS 子網域) 保持空白。
在 HTTP method (HTTP 方法) 中，選擇 GET。
在 Action type (動作類型) 中，選擇 Use path override (使用路徑覆寫)。
在 Path override (路徑覆寫) 中，輸入 {bucket}/{key}。
在 Execution role (執行角色) 中，輸入 IAM 角色的 ARN。
在 Content handling (內容處理) 中，選擇 Passthrough (傳遞)。
選擇 Create method (建立方法)。

為 GET 方法設定參數對應

請完成下列步驟：

在 API 頁面的 Resources (資源) 面板，選擇 GET。
選擇 Integration Request (整合請求)，然後選擇 Edit (編輯)。
展開 URL path parameters (網址路徑參數)。
選擇 Add path parameters (新增路徑參數)。
在 Name (名稱) 中，輸入 bucket (儲存貯體)。
在 Mapped from (對應來源) 中，輸入 method.request.path.folder。
重複執行步驟 4-6，但在步驟 5，將 Name (名稱) 設定為 key (索引鍵)。在步驟 6 中，將 Mapped from (對應來源) 設為 method.request.path.object。
選擇 Save (儲存)。

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

請完成下列步驟：

在 API 頁面的 Resources (資源) 面板，選擇 GET。
選擇 Method response (方法回應)。
在 Response 200 (回應 200) 中，選擇 Edit (編輯)。
在 Response body (回應內文) 下，移除 application/json。
在 Header name (標頭名稱) 下，選擇 Add header (新增標題)。
在 Name (名稱) 中，輸入 Content-Type。
選擇 Save (儲存)。
選擇 Integration response (整合回應)，然後選擇 Edit (編輯)。
在 Method response status code 200 (方法回應狀態代碼 200) 中，若是影像檔案請輸入 image/jpeg，若是 PDF 檔案請輸入 application/pdf。
選擇 Save (儲存)。

為 API 設定二進位媒體類型

請完成下列步驟：

在 API 頁面的導覽窗格中，選擇 API settings (API 設定)。
在 Binary media types (二進位媒體類型) 區段中，選擇 Manage media types (管理媒體類型)。
選擇 Add binary media type (新增二進位媒體類型)，然後在文字方塊中新增 / 字串。
**注意：**字串不須加上引號。您可以使用萬用字元取代特定的多用途網際網路郵件擴充 (MIME) 類型，以作為二進位媒體類型進行管理。例如，若要讓 API Gateway 將 JPEG 影像作為二進位媒體類型進行管理，請選擇 image/jpeg。如果您新增 */*，則 API Gateway 會將所有媒體類型作為二進位媒體類型進行管理。
選擇 Save changes (儲存變更)。

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

**注意：**如果您在 Web 應用程式中使用 PUT 和 GET API，那麼您可能會收到跨來源資源共用 (CORS) 錯誤。如需更多資訊，請參閱 Mozilla 網站上的 CORS 錯誤。

若要解決啟用二進位設定時出現的 CORS 錯誤，請完成下列步驟：

開啟 API Gateway console (API Gateway 主控台)。
選擇您的 API。
在 API 頁面的 Resources (資源) 面板，選取 /{object}。
選擇 Enable CORS (啟用 CORS)。
在 Gateway responses (閘道回應) 中，選擇 Default 4xx 和 Default 5xx。
在 Access-Control-Allow-Methods，選擇 GET 和 PUT。
選擇 Save (儲存)。

執行 update-integration AWS CLI 命令：

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

**注意：**將 rest-api-id 替換為您的 REST API ID，將 RESOURCE_id 替換為您的資源 ID，並將 AWS_REGION 替換為您的區域。

執行 update-integration-response 命令：

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

**注意：**將 rest-api-id 替換為您的 REST API ID，將 RESOURCE_id 替換為您的資源 ID，並將 AWS_REGION 替換為您的區域。若要讓 API Gateway 執行選項請求，您必須依序執行 update-integration 和 update-integration-response 命令。

部署 API

請完成下列步驟：

在 API 頁面的導覽窗格，選擇 Resources (資源)。
選擇 Deploy API (部署 API)。
在 Deploy API (部署 API) 視窗的 Stage (階段) 中，選擇 *New stage*。
在 Stage name (階段名稱) 中，輸入 v1。
選擇 Deploy (部署)。
在導覽窗格中，選擇 Stages (階段)。
選擇 v1 階段。
請記下出現的調用網址。

如需詳細資訊，請參閱在 API Gateway 中部署 REST API。

調用您的 REST API，將影像檔案上傳到 Amazon S3

請完成下列步驟：

將儲存貯體名稱和物件檔案名稱新增至您的 API 調用網址。
使用您偏好的用戶端發出 PUT HTTP 請求。例如，您可以下載並使用 Postman。如需詳細資訊，請參閱 Postman 網站上的下載 Postman。
選擇 Body (內文)，然後選擇 binary (二進位)。出現 Select file (選取檔案) 按鈕時，選取要上傳的本機檔案。

以下是一個 curl 命令範例，您可以執行該命令來發出 PUT HTTP 請求來上傳影像或 PDF：

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'

**注意：**將 abc12345 替換為您的 API ID，將 testfolder 替換為您的 S3 儲存貯體，並將 testimage.jpeg 替換為您上傳的本機檔案。

如果您在二進位媒體類型清單中包含 */*，那麼您可以發出 PUT 請求來上傳檔案。如果您在二進位媒體類型清單中包含 image.jpeg，則將 Content-Type 標頭新增至您的 PUT 請求中，並將其設為 image/jpeg。由於 Web 瀏覽器發出了 GET 請求，因此您可以使用相同的網址，在 Web 瀏覽器中查看影像或 PDF。