填報上傳圖片

1

問題描述。

1. 我們在採集員工資訊時，通常需要上傳員工的照片。那麼如何實現上傳圖片功能呢？

2

解決思路。

1. 【檔案元件】支援上傳圖片，支援的圖片格式有：jpg、png、gif，如下圖所示。

注：上傳的圖片以二進制編碼的形式儲存到資料庫表中。

1

準備範本。

1. 開啟設計器內建範本：【%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Form\FreeForm\自由填報範本.cpt  】，範本製作過程可參見：自由報表填報，表格樣式如下圖所示。

2

元件設定。

1. H6 儲存格新增了一個【檔案元件】，由於每個員工只需上傳一張照片，因此勾選【只支援單檔案上傳】，如下圖1所示。

2. 點選【元件設定】→【行動設備】，可設定行動端預覽時的圖片上傳方式，如下圖2所示。

3. 上傳的圖片會以二進制編碼的形式存到僱員表的照片欄位下，所以資料庫表中【照片】的欄位型別需修改為可儲存二進制的型別。

注1：【只支援單檔案上傳】，勾選此按鈕後，上傳照片會直接顯示圖片和檔案名稱；如果不勾選，上傳後則不會直接顯示圖片，只顯示檔案名稱。

注2：blob 型別資料可能無法在資料集預覽，請在其他資料庫表查詢軟體中查看是否上傳成功。

3

圖片展示。

1. 當需要展示資料庫儲存的圖片時，可設定【用圖片顯示內容】解決。

2. 選中儲存格，選擇【儲存格屬性】→【其他】→【顯示內容】，選擇【用圖片顯示內容】。如下圖所示。

4

圖片佈局設定。

1. 如果圖片太大，可能無法正常顯示，可設定【圖片佈局】解決。

2. 選中儲存格，選擇【儲存格屬性】→【樣式】→【自訂樣式】→【對齊】，設定圖片佈局的方式為【自動調整】。如下圖所示。

5

效果預覽。

1. PC 端：儲存範本，點選【填報預覽】，點選【上傳圖片】，效果如下圖所示。

2. 行動端：同時支援 App 端和 H5 端上傳圖片。

1. 已完成範本可參見：【%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Form\FreeForm\自由填報範本.cpt】。
   

2. 點選下載範本：自由填報範本.cpt。