Question

我的目标来自加载客户端的xlsx文件，并使用Leaflet表示变量。

当我给出服务器上示例的绝对路径时，一切都很好，当我尝试从<input type = "file">提供文件时，就会出现问题。

根据我在其他问题中能够读到的内容，出于安全原因创建了“伪路径”，但这意味着我无法访问客户端在输入中留下的文件。

我是编程新手，在安全性和诸如此类的东西方面我很迷失。如果有人可以解决，我将非常感激。

HTML

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

JS

/* DATA --- Read xlsx file (foreign code - PLUGIN xlsx.full.min.js ) */
function readXlsxFile(url, sheet, cb) {
  var oReq = new XMLHttpRequest();
  oReq.open("GET", url, true);
  oReq.responseType = "arraybuffer";
  oReq.onerror = function() {
    cb(new Error("Could not load file " + url));
  }
  oReq.onload = function() {
    var arraybuffer = oReq.response;
    // Convertir datos a binario
    var data = new Uint8Array(arraybuffer);
    var arr = new Array();
    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 sheetName = workbook.SheetNames[sheet];
    var worksheet = workbook.Sheets[sheetName];
    var result = XLSX.utils.sheet_to_json(worksheet, { raw: true });
    cb(null, result);
  }
  oReq.send();
};


function readXlsxFileSheet(url, cb) {
  const rateFile = serializeMapFormValues().rate
  if (rateFile === "travelers" || rateFile === "travelersPoblation" || rateFile === "travelersForeignPercent" || rateFile === "travelersNatPercent") {
    readXlsxFile(url, 0, cb);
  } else if (rateFile === "ruralTravelers" || rateFile === "ruralForeignPercent" || rateFile === "ruralPercent" || rateFile === "ruralNatPercent") {
    readXlsxFile(url, 1, cb);
  } else if (rateFile === "apartTravelers" || rateFile === "apartPoblation" || rateFile === "apartForeignPercent" || rateFile === "apartNatPercent") {
    readXlsxFile(url, 2, cb);
  } else if (rateFile === "hotelTravelers" || rateFile === "hotelForeignPercent" || rateFile === "hotelNatPercent") {
    readXlsxFile(url, 3, cb);
  } else {
    console.log("Lost variable for sheet");
  }
};
const submitButton = document.querySelector("input[type=submit]");
submitButton.addEventListener("click", function(ev) {
  ev.preventDefault();
  //Catch path and variable from the HTML form
  let fileUrl = serializeMapFormValues().url;
  let fileRow = serializeMapFormValues().rate;

  // Update map data
  readXlsxFileSheet(fileUrl, function(error, data) {
    // code
  });
});

如果我将fileUrl ("C:\fakepath\turismo_ejemplo_resuelto.xlsx")更改为"files/turismo_ejemplo_resuelto.xlsx"，一切都很好。

使用客户端上传的xlsx文件（传单）

0 个答案: