如何在不跳过的情况下从Javascript页面获取多个文件上传到服务器？

我不知道您的体系结构是什么样子，但是这里有一个潜在的解决方案可以解决您的问题。

该解决方案使用Web Worker API减轻文件上传到子流程的负担。这是通过该API的工作程序接口完成的。这种方法之所以有效，是因为没有争用主流程的单个线程的问题-网络工作者在自己的流程中工作。

使用这种方法，我们做三件事：

1. 创建一个通过脚本执行的新工作程序
2. 将消息传递给工人，以便工人处理
3. 将消息传递回主过程，以进行状态更新/回复/已解决的数据转换/等。

该代码在下面进行了大量注释，以帮助您了解正在发生的事情和发生的地方。

这是主要的JavaScript文件（script.js）

// Create a sub process to handle the file uploads
///// STEP 1: create a worker and execute the worker.js file immediately
let worker = new Worker('worker.js');
// Ficticious upload count for demonstration
let uploadCount = 12;
// repeatedly build and send files every 700ms 
// This is repeated until uplaodCount == 0
let builder = setInterval(buildDetails, 700);

// Recieve message from the sub-process and pipe them to the view
///// STEP 2: listen for messages from the worker and do something with them
worker.onmessage = e => {
  let p = document.createElement('pre');
  // e.data represents the message data sent from the sub-process
  p.innerText = e.data;
  document.body.appendChild(p);
};

/**
 * Sort of a mock to build up your BLOB (fake here of-course)
 * 
 * Post the data needed for the FormData() to the worker to handle.
 */ 
function buildDetails() {
  let filename = 'subject1234';
  let blob = new Blob(['1234']);
  ///// STEP 3: Send a message to the worker with file details
  worker.postMessage({
    name: "audio_data",
    blob: blob,
    filename: filename
  });
  // Decrease the count
  uploadCount--;
  // if count is zero (== false) stop the fake process
  if (!uploadCount) clearInterval(builder);
}

这是子流程JavaScript文件（worker.js）

// IGNORE the 'fetch_mock.js' import that is only here to avoid having to stand up a server
// FormDataPolyFill.js is needed in browsers that don't yet support FormData() in workers
importScripts('FormDataPolyFill.js', 'fetch_mock.js');
// RXJS provides a full suite of asynchronous capabilities based around Reactive Programming (nothing to do with ReactJS);
// The need for your use case is that there are guarantees that the stream of inputs will all be processed
importScripts('https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.js');

// We create a "Subject" that acts as a vessel for our files to upload
let forms = new rxjs.Subject();
// This says "every time the forms Subject is updated, run the postfile function and send the next item from the stream"
forms.subscribe(postFile);

// Listen for messages from the main process and run doIt each time a message is recieved
onmessage = doIt;

/**
 * Takes an event object containing the message
 * 
 * The message is presumably the file details
 */ 
function doIt(e) {
  var fd = new FormData();
  // e.data represents our details object with three properties
  fd.append(e.data.name, e.data.blob, e.data.filename);
  // Now, place this FormData object into our stream of them so it can be processed
  forms.next(fd);
}
// Instead of using XHR, this uses the newer fetch() API based upon Promises
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
function postFile(fd) {
  // Post the file to the server (This is blocked in fetch_mock.js and doesn't go anywhere)
  fetch('fake', {
      method: 'post',
      body: fd,
    })
    .then((fd) => {
      // After the XHR request is complete, 'Then' post a message back to the main thread (If there is a need);
      postMessage("sent: " + JSON.stringify(fd));
    });
}

由于这不会在stackoverflow中运行，因此我创建了一个插件，以便您可以运行以下示例：http ://plnkr.co/edit/kFY6gcYq627PZOATXOnk

如果这一切看起来都很复杂，那么您已经提出了要解决的复杂问题。:-)

希望这可以帮助。