Question

我想从客户端获取一个文件将其解析为json对象并将其发送到后端，我能够通过Sheet-js解析该文件。我的问题是我无法从客户端获取文件我正在使用js，SAPUI5

＆＃13;

handleUploadPress: function(oEvent) {
  var oFileUploader = this.getView().byId("fileUploader");
  if (!oFileUploader.getValue().toString()) {
    MessageToast.show("Choose a xlsx file first");
    return;
  }
  var url = "/resources/test.xlsx";
  var oReq = new XMLHttpRequest();
  oReq.open("GET", url, true);
  oReq.responseType = "arraybuffer";
  oReq.onload = function(e) {
    var arraybuffer = oReq.response;
    var data = new Uint8Array(arraybuffer);
    var arr = [];
    for (var i = 0; i !== data.length; ++i) {
      arr[i] = String.fromCharCode(data[i]);
    }
    var bstr = arr.join("");
    var workbook = XLSX.read(bstr, {
      type: "binary"
    });
    var firstSheetName = workbook.SheetNames[0];
    var worksheet = workbook.Sheets[firstSheetName];
    var json = XLSX.utils.sheet_to_json(worksheet, {
      raw: true
    });
    var jsonStr = JSON.stringify(json);
    MessageBox.show("JSON String: " + jsonStr);
  };
  oReq.send();
},

＆＃13;

Answer 1

答案是：

UploadFile.view.xml

<VBox>
     <u: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>

UploadFile.controller.js

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);
  }

如何使用sapui5 FileUploader控制器解析csv文件

1 个答案: