一、概述
1
問題描述。
我們在採集員工資訊時，通常需要上傳員工的照片。那麼如何實現上傳圖片功能呢？
2
解決思路。
【檔案元件】支援上傳圖片，支援的圖片格式有：jpg、png、gif，如下圖所示。
注：上傳的圖片以二進制編碼的形式儲存到資料庫表中。
二、範例
1
準備範本。
開啟設計器內建範本：【%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Form\FreeForm\自由填報範本.cpt 】，範本製作過程可參見：自由報表填報，表格樣式如下圖所示。
2
元件設定。
H6 儲存格新增了一個【檔案元件】，由於每個員工只需上傳一張照片，因此勾選【只支援單檔案上傳】，如下圖1所示。
點選【元件設定】→【行動端】，可設定行動端預覽時的圖片上傳方式，如下圖2所示。
上傳的圖片會以二進制編碼的形式存到僱員表的照片欄位下，所以資料庫表中【照片】的欄位型別需修改為可儲存二進制的型別。
注1：“只支援單檔案上傳”，勾選此按鈕後，上傳照片會直接顯示圖片和檔案名稱；如果不勾選，上傳後則不會直接顯示圖片，只顯示檔案名稱。
注2：blob 型別資料可能無法在資料集預覽，請在其他資料庫表查詢軟體中查看是否上傳成功。
3
圖片展示。
當需要展示資料庫儲存的圖片時，可設定【用圖片顯示內容】解決。
被菜儲存格，選擇【儲存格屬性】→【其他】→【顯示內容】，選擇【用圖片顯示內容】。如下圖所示。
4
圖片佈局設定。
如果圖片太大，可能無法正常顯示，可設定【圖片佈局】解決。
被菜儲存格，選擇【儲存格屬性】→【樣式】→【自訂樣式】→【對齊】，設定圖片佈局的方式為【適應】。如下圖所示。
5
效果預覽。
PC 端：儲存範本，點選【填報預覽】，點選上傳圖片，效果如下圖所示。
行動端：同時支援 App 端和 H5 端上傳圖片。
三、範本下載
已完成範本可參見：【%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Form\FreeForm\自由填報範本.cpt】。
點選下載範本：自由填報範本.cpt。
