SAPUI5 upload pictures or other files front-end

Due to a problem with the local environment set-cookie, so here not to use eclipse, using a web ide development testing.

1 is introduced in neo-app.json destination file. You may be used manifest.json view manager server corresponding to the added odata service, which can not manually added.

  This also avoids the use of https when ajax, http protocol is the case of the block.

 

 

2 used in the view control FileUploader necessary to introduce 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 Use ajax get operation to obtain the value of the x-csrf-token, and then into the acquired request header put in, with the file system.

   put the need to pay attention to set the file format, here I uploaded an image, it is set to contentType: [ "image / jpeg"], file object that is uploaded in the control idfileUploader file.

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");
            where 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 test. I just define a file name put in, url: "/sap/opu/odata/SAP/ZDEMO_FILE_SRV/FileSet('bb3.jpg')/$value",

  

 

   In gui, we can see bb3 this document, his type is image / jpeg

 

 

 5 get 

  

 

 

 

 

 reference:

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

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