填報上傳圖片

1.1 問題描述

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

1.2 解決思路

「檔案元件」支援上傳圖片，支援的圖片格式有：jpg、png、gif，如下圖所示：

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

2.1 準備範本

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

2.2 元件設定

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

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

2）點選「元件設定>行動端」，可設定行動端預覽時的圖片上傳方式，如下圖所示：

3）上傳的圖片會以二進制編碼的形式存到僱員表的照片欄位下，所以資料庫表中「照片」的欄位類型需修改為可儲存二進制的類型，如下圖所示：

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

2.3 圖片展示

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

被選儲存格，選擇「儲存格屬性>其他>顯示內容」，選擇「用圖片顯示內容」。如下圖所示：

2.4 圖片佈局設定

如果圖片太大，可能無法正常顯示，可設定「圖片佈局」解決。

被選儲存格，選擇「儲存格屬性>樣式>自訂樣式>對齊」，設定圖片佈局的方式為「自動調整」。如下圖所示：

2.5 效果預覽

2.5.1 PC 端

儲存範本，點選「填報預覽」，點選上傳圖片，效果如下圖所示：

2.5.2 行動端

同時支援 App 端和 H5 端上傳圖片。效果如下圖所示：

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeForm\自由填報報表.cpt

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

上傳圖片後提示：將截斷字串或二進制資料，如下圖所示

這是由於資料庫中存在該圖表欄位長度不夠導致的，只需要給這個欄位加長即可。