SAPUI5上传图片或者其他文件 front-end

由于本地环境有set-cookie的问题，所以这里不使用eclipse，使用web ide进行开发测试。

1 在neo-app.json文件中引入destination。也可以使用manifest.json的视图管理器加入对应server的odata service,这样可以不用手动追加。

  这样也可以避免https使用ajax时,http协议被block的情况。

 

2 在view中使用控件FileUploader ，需要引入xmlns:u="sap.ui.unified" 

<mvc:View controllerName="ZDEMO_UPLOAD.ZDEMO_UPLOAD.controller.App" 
    xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:u="sap.ui.unified" displayBlock="true">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                        <l:VerticalLayout>
                            <u:FileUploader
                                id="idfileUploader"
                                name="myFileUpload"
                                tooltip="Upload your file to the local server"
                                uploadComplete="handleUploadComplete"/>
                            <Button
                                text="Upload File"
                                press="handleUploadPress"/>
                            <Image
                                src="http://图片服务地址/sap/opu/odata/sap/ZDEMO_FILE_SRV/FileSet('bb2.jpg')/$value"
                                densityAware="false"
                                width="1000px" >
                                <layoutData>
                                    <FlexItemData growFactor="1" />
                                </layoutData>
                            </Image>
                        </l:VerticalLayout>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

3 使用ajax的get操作先获得x-csrf-token的值，然后将获取的值放进put的request header中，进行文件的操作。

   put的时候需要注意设置文件格式，这里我上传的是图片，所以设置为 contentType: ["image/jpeg"]，file对象，是在控件 idfileUploader 中上传的文件。

sap.ui.define([
    "sap/ui/thirdparty/jquery",
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/odata/v2/ODataModel"
], function (jQuery,Controller, ODataModel) {
    "use strict";
    return Controller.extend("ZDEMO_UPLOAD.ZDEMO_UPLOAD.controller.App", {

        onInit: function () {
            //oModel = this.getOwnerComponent().getModel("FileUpload");
        },
        
        handleUploadPress: function(oEvent) {

            var fU = this.getView().byId("idfileUploader");
            var domRef = fU.getFocusDomRef();
            var file = domRef.files[0];
            if(file){
                jQuery.ajax({
                    url: "/sap/opu/odata/SAP/ZDEMO_FILE_SRV/",
                    type: "GET",
                    async: false,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("X-CSRF-Token", "Fetch");
                    },
                    success: function (data, textStatus, XMLHttpRequest) {
                        var oToken  = XMLHttpRequest.getResponseHeader("x-csrf-token");
                        
                        var oHeaders = {
                                "x-csrf-token" : oToken
                                };
                                
                        console.log(oToken);

                        jQuery.ajax({
                            type: "PUT",
                            url: "/sap/opu/odata/SAP/ZDEMO_FILE_SRV/FileSet('bb2.jpg')/$value",
                            headers: oHeaders,
                            cache: false,
                            processData: false,
                            contentType:  ["image/jpeg"],
                            data: file,
                            success: function (data, textStatus, XMLHttpRequest) {
                                console.log("success put");
                            },
                            error: function (odata) {
                                console.log("error put");
                            }
                        });
                    },
                    error: function (odata) {
                        console.log("error");
                    }
                });
            }
        }
    });
});

4 测试。我在put中随便定义了一个文件名，url: "/sap/opu/odata/SAP/ZDEMO_FILE_SRV/FileSet('bb3.jpg')/$value",

  

   在gui中我们可以看到bb3这个文件，他的type是image/jpeg

 

 5 get 

  

 

 参考：

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

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