使用客户端JavaScript提交大JSON数据至另一页面时遇问题求助

问题根源 #

1. POST数据大小限制：浏览器和Salesforce Marketing Cloud对POST请求的 payload 大小有默认阈值，10万行CSV转JSON后体积远超限制，导致提交被拦截。
2. 前端内存溢出：一次性将10万行CSV解析为JSON数组，会占用大量浏览器内存，引发卡顿甚至崩溃。
3. 后端解析压力：一次性解析超大JSON字符串，容易触发SSJS的执行超时或资源限制。

推荐解决方案 #

方案一：后端直接解析CSV（最优） #

前端不做JSON转换，直接上传CSV文件到后端，由SSJS逐行解析处理，彻底规避前端内存和POST大小问题。

前端HTML/JS修改：

<h2>Upload your CSV file</h2>
<p id="demo"></p>
<!-- 修改表单为支持文件上传 -->
<form name="myform" action="URL_OF_2ND_PAGE" method="post" enctype="multipart/form-data">
  <input type="file" name="csvFile" accept=".csv">
  <br><br>
  <button type="submit">上传并处理</button>
</form>

<script>
// 移除原文件读取和JSON转换逻辑，表单直接提交文件
</script>

后端SSJS修改：

<h1>数据导入处理中...</h1>
<script runat="server">
Platform.Load("Core","1.1.1");
try {
  // 获取上传的CSV文件
  var file = Request.Files("csvFile");
  if (!file || file.Size <= 0) {
    throw new Error("未上传有效CSV文件");
  }

  // 读取文件内容并按行分割
  var csvContent = file.OpenText().ReadAll();
  var lines = csvContent.split(/\r?\n/); // 兼容不同换行符
  var headers = lines[0].split(",").map(h => h.trim()); // 处理表头空格

  // 逐行解析数据（跳过空行和表头）
  for (var i = 1; i < lines.length; i++) {
    var line = lines[i].trim();
    if (!line) continue; // 跳过空行
    var values = line.split(",");
    var user = {};
    for (var j = 0; j < headers.length; j++) {
      user[headers[j]] = values[j] ? values[j].trim() : "";
    }
    // 这里替换为你的业务逻辑（比如插入数据到数据扩展）
    // 示例：打印用户信息（实际使用时替换为插入操作）
    Write(`处理用户：${user['First Name']} ${user['Last Name']} - ${user['Email']}<br>`);
  }
  Write("<h2>数据导入成功完成</h2>");
} catch(e) {
  Write(`<h2>导入失败：${Stringify(e)}</h2>`);
}
</script>

方案二：前端分块上传（适合必须前端预处理的场景） #

将CSV分成多个小块，逐块转换为JSON并上传，后端收集所有块后合并处理。

前端JS修改：

function ReadCSVFunction(file, callback) {
  var reader = new FileReader();
  reader.onload = function() {
    callback(this.result);
  }
  reader.readAsText(file);
}

// 分块处理CSV，每块1000行
function processCSVInChunks(csvContent, chunkSize = 1000) {
  var lines = csvContent.split(/\r?\n/);
  var headers = lines[0].split(",").map(h => h.trim());
  var totalChunks = Math.ceil((lines.length - 1) / chunkSize);
  var currentChunk = 0;

  function uploadChunk(startIndex) {
    var chunkData = [];
    var endIndex = Math.min(startIndex + chunkSize, lines.length - 1);
    for (var i = startIndex; i <= endIndex; i++) {
      var line = lines[i].trim();
      if (!line) continue;
      var values = line.split(",");
      var obj = {};
      for (var j = 0; j < headers.length; j++) {
        obj[headers[j]] = values[j] ? values[j].trim() : "";
      }
      chunkData.push(obj);
    }

    // 用Fetch API上传块数据
    fetch("URL_OF_2ND_PAGE", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        chunk: chunkData,
        chunkIndex: currentChunk,
        totalChunks: totalChunks,
        headers: headers
      })
    }).then(response => response.text())
      .then(result => {
        document.getElementById("demo").innerHTML = `已上传第${currentChunk+1}/${totalChunks}块`;
        currentChunk++;
        if (currentChunk < totalChunks) {
          uploadChunk(endIndex + 1);
        } else {
          document.getElementById("demo").innerHTML = "所有块上传完成，等待后端合并处理";
        }
      })
      .catch(error => {
        document.getElementById("demo").innerHTML = `上传失败：${error.message}`;
      });
  }

  // 开始上传第一块
  uploadChunk(1);
}

document.querySelector('input[type="file"]').addEventListener('change', function() {
  var file = this.files[0];
  if (file) {
    ReadCSVFunction(file, function(result) {
      processCSVInChunks(result.toString());
    });
  }
});

后端SSJS修改（分块接收）：

<h1>数据块接收处理中...</h1>
<script runat="server">
Platform.Load("Core","1.1.1");
try {
  // 获取请求体中的块数据
  var requestBody = Request.PostData;
  var data = Platform.Function.ParseJSON(requestBody);
  
  if (!data.chunk || !data.headers) {
    throw new Error("无效的块数据");
  }

  // 这里可以将块数据临时存储到数据扩展（需提前创建临时表）
  var de = DataExtension.Init("Temp_CSV_Upload");
  for (var i = 0; i < data.chunk.length; i++) {
    de.Rows.Add(data.chunk[i]);
  }

  // 如果是最后一块，执行最终处理逻辑
  if (data.chunkIndex + 1 === data.totalChunks) {
    // 从临时表读取所有数据，执行业务逻辑
    var allRows = de.Rows.Retrieve();
    for (var j = 0; j < allRows.length; j++) {
      var user = allRows[j];
      // 替换为你的业务逻辑
      Write(`处理用户：${user['First Name']} ${user['Last Name']} - ${user['Email']}<br>`);
    }
    // 清空临时表
    de.Rows.Remove(["ID"], [">0"]); // 需根据临时表主键调整
    Write("<h2>所有数据处理完成</h2>");
  } else {
    Write(`已接收第${data.chunkIndex+1}/${data.totalChunks}块`);
  }
} catch(e) {
  Write(`<h2>处理失败：${Stringify(e)}</h2>`);
}
</script>

方案三：优化原前端逻辑（临时缓解，不推荐大文件） #

如果必须保留前端转JSON，可优化解析逻辑并改用Fetch提交，同时调整服务器限制（但Salesforce端限制无法自行修改）：

function CSVtoJSONFunction(csv) {
  // 优化换行符处理，避免空行
  var lines = csv.split(/\r?\n/).filter(line => line.trim());
  var headers = lines[0].split(",").map(h => h.trim());
  var result = [];
  
  // 逐行处理，减少内存占用（效果有限）
  for (var i = 1; i < lines.length; i++) {
    var values = lines[i].split(",");
    var obj = {};
    for (var j = 0; j < headers.length; j++) {
      obj[headers[j]] = values[j] ? values[j].trim() : "";
    }
    result.push(obj);
  }

  // 用Fetch API提交，替代表单提交（支持更大 payload）
  fetch("URL_OF_2ND_PAGE", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ userdata: result })
  }).then(response => response.text())
    .then(result => {
      document.getElementById("demo").innerHTML = "提交成功";
      window.location.href = "URL_OF_2ND_PAGE";
    })
    .catch(error => {
      document.getElementById("demo").innerHTML = `提交失败：${error.message}`;
    });
}

内容的提问来源于stack exchange，提问作者Tim S