上傳相片至Oracle Content and Experience
將相片上傳到您在Oracle Visual Builder 中開發之應用程式的 Oracle Content and Experience。
若要使用Oracle Visual Builder 應用程式從使用者的裝置或裝置相機上傳相片，您需要三種方法：
- 此服務連線會顯示「上傳檔案」端點，以上傳「拍攝相片」動作所傳回的相片。您用來上傳相片的端點就是上傳其他檔案類型的相同端點。若要建立此端點，請參閱建立端點以上傳檔案。
- UI 元件 (例如按鈕)：使用者應該呼叫動作鏈的動作鏈，其中包含Oracle Visual Builder 提供的「拍攝相片」動作，以協助使用者採取相片的使用案例實行。
- 使用「上傳檔案」端點上傳相片動作所傳回的動作鏈。
您需要服務連線至文件的 REST API，才能提供「上傳檔案」端點的存取權。建立服務連線和端點之後，您可以使用應用程式中的動作鏈結來製作相片，並將它上傳至Oracle Content and Experience。
準備在Oracle Visual Builder 應用程式中使用拍攝相片動作
您可以使用Oracle Visual Builder的拍攝相片動作，從行動裝置相機拍攝相片，或從相片庫選取影像以上傳至Oracle Content and Experience。
若要使用拍攝相片動作將相片上傳至Oracle Content and Experience，請執行下列預備工作：
- 在您應用程式頁面中新增
folderID變數，以識別Oracle Content and Experience 文件儲存中的資料夾，而「上傳檔案」端點將上傳相片。 - 撰寫呼叫模組功能來產生隨機檔案名稱，以指派給上傳的相片。如果您未指派檔案名稱，則上傳的相片在Oracle Content and Experience 的「文件」檢視中會顯示為
blob，因為「拍攝相片」動作會傳回一個沒有相關檔案名稱的二進位資料物件。
完成這些作業之後，您就可以接著新增Ui元件(例如按鈕) ，讓使用者呼叫包含「拍攝相片」動作的動作鏈結，以及呼叫「上傳檔案」端點的「REST呼叫端點」。
在將包含按鈕元件之頁面的「變數」編輯器中，按一下+變數按鈕以新增名為 folderId 的變數。將類型指定為 String，其預設值為 self，然後選取輸入參數核取方塊。
此變數識別「上傳檔案」端點上傳檔案的資料夾位置。預設值 self 指定「文件」的根目錄。
Vb-cec-variable-folderid.png 圖解描述
若要寫入呼叫模組函數來產生隨機檔案 ID：
在頁面的「函數」編輯器中，新增註解行 (//) 之間顯示的下列函數。
define(['vb/helpers/rest', 'vb/helpers/rest'], (Rest, RestHookHandler) => {
'use strict';
var PageModule = function PageModule() { };
// Generate random file name.
PageModule.prototype.generateRandomID = function () {
var randomID = Math.floor((Math.random() * 10000000000000) + 1);
return randomID.toString();;
};
// ...
return PageModule;
});
Vb-cec-functionCalll-code.png 圖解描述
呼叫拍攝相片動作並上傳檔案端點
您將新增一個按鈕元件，一般使用者按一下或點選即可呼叫包含拍攝相片動作的動作鏈結，此動作會傳回上傳檔案端點上傳至Oracle Content and Experience的相片。
- 在「按鈕」元件之「特性偵測器」的「事件」區段中，按一下新建事件下拉式清單，然後選取快速開始：ojAction。
- 在「動作鏈結」工作區的動作底下的篩選輸入欄位中輸入
Function，然後將「呼叫模組函數」動作拖放至「動作鏈結」工作區。 - 在「動作鏈結」工作區的動作底下的篩選輸入欄位中輸入
Call REST，然後將「呼叫 REST 端點」動作拖放至「動作鏈結」工作區。 - 在「選取端點」對話方塊中，選取您在建立Oracle Content and Experience服務連線時新增的「上傳檔案」端點，然後按一下選取。
- 在動作鏈結工作區中，選取呼叫 REST 端點動作，然後在內容類型輸入欄位中輸入
multipart/form-data。 - 在「參數」下按一下「主體」以呼叫「呼叫 REST 端點」對話方塊，您可以在此對話方塊中為主體參數寫入下列靜態內容表示式，以上傳採用相片動作傳回的檔案。表示式的其中一個部分是一個 JSON 物件 (
jsonInputParameters)，其中parentID與folderID頁面變數成對，另一個部分則是相片本身 (primaryFile)。{ "jsonInputParameters": "{{ '{ \"parentID\":\"' + $page.variables.folderId + '\"}' }}", "primaryFile": "{{ $chain.results.takePhoto1.file }}" }
Vb-cec-takePhoto -expression.png 圖解描述 - 在頁面的描述資料編輯器中，找出「呼叫 REST 端點」動作項目，此動作會上傳接受相片動作傳回的相片，並附加下列項目，如此上傳的相片在上傳至Oracle Content and Experience時，將會有檔案名稱和副檔名 (
.png)。"CallRestEndpoint1": { "module": "vb/action/builtin/restAction", "parameters": { "endpoint": "documentsApi1_2/postFilesData", "body": { "jsonInputParameters": "{{ '{ \"parentID\":\"' + $page.variables.folderId + '\"}' }}", "primaryFile": "{{ $chain.results.takePhoto1.file }}" }, "contentType": "multipart/form-data", "uriParams": { "filename": "{{ $chain.results.callModuleFunction1 + \".png\" }}" } }, ... } }
Vb-cetakeke-appendfilename.png 圖解描述
