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

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

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

<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中，进行文件的操作。

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",