使用 TRESTClient 與 TRESTRequest 作為 HTTP Client 之二 (POST 檔案)

使用 HTML 進行檔案上傳，已經是很平常的應用了，在手機App裡面，也常常會用到這個作業，例如拍照上傳，或是從相簿選取照片上傳，都是很常見的。

在 HTML 的 Form 裡面，要讓使用者選擇檔案上傳，通常會這樣寫:

<input type="file" name="fileId1" id="fileId1"/>

當我們在 HTML 裡面這麼寫，網頁瀏覽器會自動在畫面上顯示一個按鈕，點選之後，會出現檔案選擇的對話框讓使用者選擇檔案。

但是，在手機作業系統中，為了提供檔案系統的Sandbox 功能，並無法從網頁直接提供相簿照片選擇或拍照上傳的功能，所以大多數類似的功能，還是得透過 App 提供才行。

在這個範例中，為了讓使用者能直覺使用檔案選擇的功能，所以也同時介紹了如何從手機相簿選擇與拍照上傳的功能。

如何讓Delphi程式提供相簿選照片的功能

在Delphi環境中，要提供使用者從相簿選相片，或是啟動相機拍照，都要透過 TAction 來完成，只是從相簿選照片跟啟動拍照功能，是以兩個不同的 TAction 來完成的。雖說是不同的 TAction 處理不同的程序，但取得照片的時候，回傳給程式的結果都是用TBitMap 來儲存相片。

換句話說，取得了 TBitMap 之後，我們想要對TBitMap做任何影像處理、格式處理，都可以由我們的程式碼來操作。

從 Delphi XE6 之後，這些直接使用行動裝置功能的程式碼，都已經被載入到TAction裡面了，我們只需要在使用上了解如何把TAction跟按鈕事件綁在一起即可。

首先，我們需要在 Form 上面放上一個 TActionList 元件，然後雙擊這個元件，就可以顯示出 ActionList 的編輯畫面：

在這畫面中，我們要新增Media Library 的兩個 Standard Action，就是上圖的TakePhotoFromLibraryAction (從相簿取得照片)，以及TakePhotoFromCameraAction (從相機拍攝照片)。

建立兩個 Action 之後，我們就需要為這兩個 Action 設定 onDidFinish 跟 onDidCancel 的事件，前者是用來處理確定拍攝/挑選照片的事件，後者則是用來處理取消拍攝/挑選照片的事件。

在這個範例中，onDidFinish 的時候，會把回傳來的圖片資料直接放在畫面上的 TImage 元件顯示，所以它的程式碼很單純:

procedure TForm2.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
   self.Image1.Bitmap.Assign(Image);
end;

procedure TForm2.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);
begin
   self.Image1.Bitmap.Assign(Image);
end;

就是直接把 Image Assign 給 Image1.Bitmap 屬性即可。

最後，點選按鈕上傳，完整的程式碼如下:

procedure TForm2.btnUploadClick(Sender: TObject);
var
   newItem: TRESTRequestParameter;
   allPass: boolean;
   imgPath, houseNum, floorIdx: string;
   nameStr: String;
   obj: TJSONObject;
begin
   allPass := True;

   if self.EditName.Text = '' then begin
      allPass := False;
      ShowMessage('請填寫住戶名字');
   end
   else if (Length(self.EditCardNo.Text) < 5) or
       (Length(self.EditCardNo1.Text) < 5) then begin
      allPass := False;
      ShowMessage('請填寫悠遊卡卡號10碼');
   end
   else if self.Image1.Bitmap.IsEmpty then begin
      allPass := False;
      ShowMessage('請提供悠遊卡感應卡號照片');
   end;

   if allPass then begin
      self.RectWaiting.Visible := True;
      self.AniIndicator1.Enabled := True;

      imgPath := System.IOUtils.TPath.Combine
          (System.IOUtils.TPath.GetDocumentsPath, 'tmp123.png');
      self.Image1.Bitmap.SaveToFile(imgPath);

      self.RESTClient1.BaseURL :=
          'http://testURL/acceptNewCard.php';

      self.RESTRequest1.Params.Clear;
      RESTRequest1.Method := rmPOST;

      nameStr := self.EditName.Text;

      self.RESTRequest1.AddParameter('cardNum', self.EditCardNo.Text + ':' +
          self.EditCardNo1.Text);
      nameStr := TIdURI.ParamsEncode(nameStr, IndyTextEncoding_UTF8);
      self.RESTRequest1.AddParameter('name', nameStr,
          TRESTRequestParameterKind.pkGETorPOST,
          [TRESTRequestParameterOption.poDoNotEncode]);
      // self.RESTRequest1.AddParameter('name', nameStr, TRESTRequestParameterKind.pkGETorPOST, [TRESTRequestParameterOption.poDoNotEncode]);

      case self.ComboBoxHouseNum.ItemIndex of
         0: begin
               houseNum := '1';
            end;
         1: begin
               houseNum := '374';
            end;
      end;

      houseNum := TIdURI.ParamsEncode(houseNum, IndyTextEncoding_UTF8);
      self.RESTRequest1.AddParameter('houseNum', houseNum);

      floorIdx := IntToStr(self.ComboBoxFloor.ItemIndex + 1);
      self.RESTRequest1.AddParameter('floorIdx', floorIdx);
      self.RESTRequest1.AddFile('picFilename', imgPath);
      self.RESTRequest1.Execute;

      obj := TJSONObject.ParseJSONValue(self.RESTRequest1.Response.JSONText)
          as TJSONObject;
      ShowMessage(obj.GetValue<String>('result'));

      self.RectWaiting.Visible := False;
      self.AniIndicator1.Enabled := False;
   end;
end;

上面的程式碼裡面，處理檔案的重點只有一行：
self.RESTRequest1.AddFile('picFilename', imgPath);

在更前面一點的程式碼中，imgPath 是由TImage.Bitmap即時存下來的照片，這個範例只適用於 Delphi 10.2 (Tokyo) 以後的版本，因為在 Berlin 當中，對於檔案的 MIME Type 還沒有完全支援，所以在 Berlin 或 Seattle 當中要使用這個方法上傳檔案的朋友，請升級吧，我也沒辦法直接提供 TRESTClient 在新版的程式碼給大家。