如何在 SAPUI5 中上传文件

Question

如何使用 SAPUI5 在 SAP Netweaver 服务器中上传文件？我尝试使用 FileUploader 上传文件，但如果有人能提供帮助，我将不胜感激。提前致谢

Answer 1

清单、组件和索引文件均未添加任何内容。它对我有用，您只需要将列数更改为适合您文件的任何内容。

上传文件.view.xml

<VBox>
    <sap.ui.unified:FileUploader id="idfileUploader" typeMissmatch="handleTypeMissmatch" change="handleValueChange" maximumFileSize="10" fileSizeExceed="handleFileSize" maximumFilenameLength="50" filenameLengthExceed="handleFileNameLength" multiple="false" width="50%" sameFilenameAllowed="false" buttonText="Browse" fileType="CSV" style="Emphasized" placeholder="Choose a CSV file"/>
    <Button text="Upload your file" press="onUpload" type="Emphasized"/>
</VBox>

上传文件.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast", "sap/m/MessageBox", "sap/ui/core/routing/History"], function(
    Controller, MessageToast, MessageBox, History) {
  "use strict";

  return Controller.extend("cafeteria.controller.EmployeeFileUpload", {
    onNavBack: function() {
      var oHistory = History.getInstance();
      var sPreviousHash = oHistory.getPreviousHash();
      if (sPreviousHash !== undefined) {
        window.history.go(-1);
      } else {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("admin", true);
      }
    },
    handleTypeMissmatch: function(oEvent) {
      var aFileTypes = oEvent.getSource().getFileType();
      jQuery.each(aFileTypes, function(key, value) {
        aFileTypes[key] = "*." + value;
      });
      var sSupportedFileTypes = aFileTypes.join(", ");
      MessageToast.show("The file type *." + oEvent.getParameter("fileType") +
        " is not supported. Choose one of the following types: " +
        sSupportedFileTypes);
    },
    handleValueChange: function(oEvent) {
      MessageToast.show("Press 'Upload File' to upload file '" + oEvent.getParameter("newValue") + "'");
    },
    handleFileSize: function(oEvent) {
      MessageToast.show("The file size should not exceed 10 MB.");
    },
    handleFileNameLength: function(oEvent) {
      MessageToast.show("The file name should be less than that.");
    },
    onUpload: function(e) {
      var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
      var fU = this.getView().byId("idfileUploader");
      var domRef = fU.getFocusDomRef();
      var file = domRef.files[0];
      var reader = new FileReader();
      var params = "EmployeesJson=";
      reader.onload = function(oEvent) {
        var strCSV = oEvent.target.result;
        var arrCSV = strCSV.match(/[\w .]+(?=,?)/g);
        var noOfCols = 6;
        var headerRow = arrCSV.splice(0, noOfCols);
        var data = [];
        while (arrCSV.length > 0) {
          var obj = {};
          var row = arrCSV.splice(0, noOfCols);
          for (var i = 0; i < row.length; i++) {
            obj[headerRow[i]] = row[i].trim();
          }
          data.push(obj);
        }
        var Len = data.length;
        data.reverse();
        params += "[";
        for (var j = 0; j < Len; j++) {
          params += JSON.stringify(data.pop()) + ", ";
        }
        params = params.substring(0, params.length - 2);
        params += "]";
        // MessageBox.show(params);
        var http = new XMLHttpRequest();
        var url = oResourceBundle.getText("UploadEmployeesFile").toString();
        http.onreadystatechange = function() {
          if (http.readyState === 4 && http.status === 200) {
            var json = JSON.parse(http.responseText);
            var status = json.status.toString();
            switch (status) {
              case "Success":
                MessageToast.show("Data is uploaded succesfully.");
                break;
              default:
                MessageToast.show("Data was not uploaded.");
            }
          }
        };
        http.open("POST", url, true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.send(params);
      };
      reader.readAsBinaryString(file);
    }
  });
});

Answer 2

在对这个问题进行了更多研究之后，我终于自己解决了这个问题，我在php中放置了一个文件控制器和一个上传器，它可以进一步返回与文件相关的详细信息，我们可以使用它来上传它在服务器上。

这是我使用的代码。

文件上传.html

<!DOCTYPE html>  
<html><head>  
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />  
    <title>Hello World</title>  

    <script id='sap-ui-bootstrap' src='http://localhost/resources/sap-ui-core.js' data-sap-ui-theme='sap_goldreflection'  
    data-sap-ui-libs='sap.ui.commons'></script>   

<script>  
    var layout = new sap.ui.commons.layout.MatrixLayout();
    layout.setLayoutFixed(false);
    // create the uploader and disable the automatic upload
    var oFileUploader2 = new sap.ui.commons.FileUploader("myupload",{
                         name: "upload2",
                         uploadOnChange: true,
                         uploadUrl: "uploader.php",
                         uploadComplete: function (oEvent) {
    var sResponse = oEvent.getParameter("response");
    if (sResponse) {
        alert(sResponse);
    }
    }});                        
    layout.createRow(oFileUploader2);
    // create a second button to trigger the upload
    var oTriggerButton = new sap.ui.commons.Button({
                         text:'Trigger Upload',
                         press:function() {
    // call the upload method
    oFileUploader2.upload();

    $("#myupload-fu_form").submit();
    alert("hi");
    }
    });
    layout.createRow(oTriggerButton);
    layout.placeAt("sample2");                
</script>

</head>
<body class='sapUiBody'>
    <div id="sample2"></div>  
</body>
</html>

上传者.php

<?php
    print_r($_FILES);
?>

Answer 3

如果我们能看到你的代码就好了。

这应该有效。

var layout = new sap.ui.commons.layout.MatrixLayout();
layout.setLayoutFixed(false);

// create the uploader and disable the automatic upload
var oFileUploader2 = new sap.ui.commons.FileUploader({
    name : "upload2",
    uploadOnChange : false,
    uploadUrl : "../../../upload"
});
layout.createRow(oFileUploader2);

// create a second button to trigger the upload
var oTriggerButton = new sap.ui.commons.Button({
    text : 'Trigger Upload',
    press : function() {
        // call the upload method
        oFileUploader2.upload();
    }
});
layout.createRow(oTriggerButton);

layout.placeAt("sample2");