SAPUI5アップロード画像や他のファイルのフロントエンド

ローカル環境のSet-Cookieに問題が原因なので、ここではウェブのIDE開発テストを使用して、Eclipseを使用しません。

1は、ネオapp.json先ファイルに導入されます。あなたは手動で追加することはできません追加ODATAサービスに対応するmanifest.jsonをビューマネージャサーバを使用することができます。

Ajaxは、HTTPプロトコルがブロックの場合であるとき、これはまた、HTTPSの使用を回避します。

U =「sap.ui.unified」のxmlnsを導入する必要がビュー制御FileUploaderで使用される2

< MVC：ビューコントローラ名= "ZDEMO_UPLOAD.ZDEMO_UPLOAD.controller.App"  
    のxmlns：MVC = "sap.ui.core.mvc" のxmlns = "sap.m" のxmlns：リットル= "sap.ui.layout" のxmlns：U = "sap.ui.unified" displayBlock = "真" > 
    < シェルID = "殻" > 
        < アプリケーションID = "アプリ" > 
            < ページ> 
                < ページID = "ページ" タイトル= "{I18N>タイトル}" > 
                    < コンテンツ>
                        < L：VerticalLayout > 
                            <U：FileUploader
                                 idは= "idfileUploader" 
                                名前= "myFileUpload" 
                                ツールヒント= "ローカルサーバーにファイルをアップロード" 
                                uploadComplete = "handleUploadComplete" /> 
                            < ボタン
                                 、テキスト= "ファイルのアップロード" 
                                を押し= "handleUploadPress" /> 
                            < 画像
                                 SRC = "のhttp：//图片服务地址/sap/opu/odata/sap/ZDEMO_FILE_SRV/FileSet('bb2.jpg')/$value"
                                densityAware = "false"に
                                幅= "1000px"  > 
                                < layoutData > 
                                    < FlexItemData growFactor = "1"  /> 
                                </ layoutData > 
                            </ 画像> 
                        </ リットル：VerticalLayout > 
                    </ コンテンツ> 
                </ ページ> 
            </ ページ> 
        </ アプリケーション> 
    </ シェル> 
</ MVC：見ます>

3を使用し、AJAX操作がx CSRFトークンの値を取得するために取得し、ファイルシステムと、入れ取得リクエストヘッダに。

[「画像/ JPEG」]、制御idfileUploaderファイルでアップロードされたファイルオブジェクト：ファイル形式を設定するために注意を払う必要性を置くここで私は、画像をアップロードし、それはcontentTypeのに設定されています。

sap.ui.define（[
     "SAP / UI /サードパーティー/ jqueryの" 、
     "SAP / UI /コア/ MVC /コントローラ" 、
     "SAP / UI /モデル/ ODATA / V2 / ODataModel" 
]、機能（jQueryの、コントローラ、 ODataModel）{
     "厳格な使用" ;
     戻り Controller.extend（ "ZDEMO_UPLOAD.ZDEMO_UPLOAD.controller.App" 、{ 

        ：のOnInit 関数（）{
             // 。oModel = this.getOwnerComponent（）getModel（ "するFileUpload"）
        }、
        
        handleUploadPressを：関数（oEvent）{ 

            VARの FU = この .getView（）byId（ "idfileUploader"。 ）。
            ましたdomRef = fU.getFocusDomRef（）。
            VaRのファイル= domRef.files [0 ];
            もし（ファイル）{ 
                jQuery.ajax（{ 
                    URL： "/ SAP / OPU / ODATA / SAP / ZDEMO_FILE_SRV /" 、
                    種類： "GET" 、
                    非同期：偽、
                    beforeSend：機能（XHR）{ 
                        xhr.setRequestHeader（「X- CSRFトークン」、 ""フェッチ）; 
                    }、
                    成功：関数（データ、textStatus、XMLHttpRequestの）{
                        VAR oToken = XMLHttpRequest.getResponseHeader（ "X-CSRFトークン" ）。
                        
                        VaRの oHeaders = {
                                 "X-CSRFトークン" ：oToken 
                                }。
                                
                        console.log（oToken）。

                        jQuery.ajax（{ 
                            タイプ： "PUT" 、
                            URL： "/sap/opu/odata/SAP/ZDEMO_FILE_SRV/FileSet('bb2.jpg')/$value" 、
                            ヘッダ：oHeaders、
                            キャッシュ：偽、
                            PROCESSDATA：偽、
                            contentType：[ "画像/ JPEG" ]、
                            データ：ファイル、
                            成功：関数（データ、textStatus、XMLHttpRequestの）{ 
                                にconsole.log（ "成功プット" ）。
                            }、
                            エラー：関数（ODATA）{ 
                                にconsole.log（ "エラーPUT" ）。
                            } 
                        }）。
                    }、
                    エラー：関数（ODATA）{ 
                        にconsole.log（"エラー" ）; 
                    } 
                }）。
            } 
        } 
    }）。
}）;

4試験。私はただで入れたファイル名を定義し、URL：「/sap/opu/odata/SAP/ZDEMO_FILE_SRV/FileSet('bb3.jpg')/$value」、

GUIでは、私たちは、この文書BB3見ることができ、彼のタイプは、画像/ JPEGです

5取得

参考：

https://blogs.sap.com/2017/05/17/sapui5-ms-excel-file-upload/

https://blogs.sap.com/2015/04/27/file-upload-using-sapui5-control/

SAPUI5アップロード画像や他のファイルのフロントエンド

おすすめ