使用KendoFileManager在Worker线程上传文件时后端接收不到文件

为避免文件预上传校验耗时，我尝试在Worker线程中使用Kendo FileManager控件上传文件，但后端控制器的Request.Files始终为空，找不到上传的文件数据，需要解决如何在后端获取UI传递的文件。

现有代码 #

Worker线程代码（worker.js） #

onmessage = function(filesArray) {
var fileData = new FormData();

// if there are multiple files , loop through each files
for (var i = 0; i < message.data.length; i++) {
     fileData.append(message.data[i].name, message.data[i]);
    }
var xhr = new XMLHttpRequest();
xhr.open("POST", "/SelfServiceAI/Upload3/", true);
xhr.setRequestHeader('Accept', 'multipart/form-data');
xhr.withCredentials = true;
xhr.onload = () => { // Call a function when the state changes.
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        //postMessage("File successfully uploaded")
        // Request finished. Do processing here.
    }
    else {
        //postMessage("File upload failed!");
    }
}
xhr.send(fileData);
}

前端Kendo FileManager调用代码 #

$("#filemanager").kendoFileManager({ 
....
upload : {
          upload : function (e) {
             const worker = new Worker(worker.js);
             worker.postMessage(e.sender.getFiles());
           }
         },
....
});

后端控制器代码 #

public JsonResult Upload ()
{
 HttpFileCollectionBase files = Request.Files;
 // Other processing logic
}

问题原因与修复方案 #

关键问题点 #

1. Worker的onmessage参数错误：原代码用filesArray作为参数，实际应该通过e.data获取传递的文件数组，而非message.data
2. 结构化克隆导致File对象失效：postMessage传递原生File对象时，会被转为结构化克隆后的普通对象，丢失原生File特性，无法被FormData正确序列化
3. 请求头设置错误：手动设置Accept: multipart/form-data多余且可能干扰后端解析，浏览器会自动生成包含boundary的正确Content-Type
4. Worker路径语法错误：new Worker(worker.js)缺少引号，会触发语法错误
5. 控制器方法名不匹配：前端请求路径是/SelfServiceAI/Upload3/，后端方法名是Upload，导致请求无法匹配到正确的动作方法

修正后的代码 #

修正后的worker.js

onmessage = function(e) {
  const fileData = new FormData();
  // 遍历传入的文件数组，重新包装为原生File对象
  for (const file of e.data) {
    const nativeFile = new File([file], file.name, { type: file.type });
    fileData.append("files", nativeFile); // 统一键名，方便后端接收
  }

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "/SelfServiceAI/Upload3/", true);
  xhr.withCredentials = true;
  
  xhr.onload = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      postMessage(xhr.status === 200 ? "文件上传成功" : `文件上传失败，状态码：${xhr.status}`);
    }
  };

  xhr.onerror = () => {
    postMessage("上传请求发生错误");
  };

  xhr.send(fileData);
};

修正后的前端调用代码

$("#filemanager").kendoFileManager({ 
  // 其他配置项
  upload : {
    upload : function (e) {
      // Worker路径添加引号
      const worker = new Worker('worker.js');
      worker.postMessage(e.sender.getFiles());
      
      // 监听Worker返回的上传结果
      worker.onmessage = function(msg) {
        console.log(msg.data);
      };
    }
  },
  // 其他配置项
});

修正后的后端控制器代码

// 方法名与请求路径中的Upload3保持一致
public JsonResult Upload3()
{
  HttpFileCollectionBase files = Request.Files;
  if (files.Count > 0)
  {
    foreach (string key in files)
    {
      var uploadedFile = files[key];
      // 此处添加文件处理逻辑，如保存到服务器指定路径
    }
    return Json(new { success = true, message = "文件上传成功" });
  }
  else
  {
    return Json(new { success = false, message = "未接收到上传文件" });
  }
}

内容的提问来源于stack exchange，提问作者Swapnil Paithankar