前端经典面试题合集, 怎么用 JS 实现大型文件上传?要考虑哪些问题?

QA

Step 1

Q:: 如何使用 JavaScript 实现大型文件上传？要考虑哪些问题？

A:: 使用 JavaScript 实现大型文件上传时，可以通过分块上传（chunking）来解决文件过大的问题。首先，使用 File API 将文件分割成多个小块，然后逐块上传至服务器，并在服务器端进行重组。关键点包括：1. 文件分块（Chunking）；2. 分块上传的进度控制；3. 上传失败的重试机制；4. 文件完整性校验（例如通过哈希值）；5. 服务端的分块合并与校验。具体代码实现如下：

 
function uploadFile(file) {
  const chunkSize = 1024 * 1024; // 1MB
  const chunks = Math.ceil(file.size / chunkSize);
  let currentChunk = 0;
  const reader = new FileReader();
 
  reader.onload = e => {
    const data = e.target.result;
    // 将当前块上传到服务器
    uploadChunk(data, currentChunk).then(() => {
      currentChunk++;
      if (currentChunk < chunks) {
        readNextChunk();
      } else {
        console.log('Upload complete');
      }
    }).catch(err => {
      console.error('Upload failed', err);
    });
  };
 
  function readNextChunk() {
    const start = currentChunk * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    reader.readAsArrayBuffer(file.slice(start, end));
  }
 
  readNextChunk();
}

Step 2

Q:: 文件上传的过程中如何进行进度控制？

A:: 可以使用 XMLHttpRequest 或 Fetch API 提供的进度事件（progress event）来进行进度控制。对于 XMLHttpRequest，可以监听 xhr.upload.onprogress 事件，获取上传的进度。具体代码实现如下：

 
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`Upload progress: ${percentComplete}%`);
  }
};

对于 Fetch API，可以使用 ReadableStream 和 Request 对象的 body 属性来实现进度控制。

用途

面试这个内容的目的是考察候选人对前端开发中常见问题的理解和解决能力。大型文件上传是一个实际生产环境中经常遇到的问题，特别是在涉及到大数据、视频上传或备份等场景时。候选人需要展示出如何高效、安全地处理大文件的上传，以确保用户体验和数据完整性。\n

前端经典面试题合集, 怎么用 JS 实现大型文件上传?要考虑哪些问题?

前端经典面试题合集, 怎么用 JS 实现大型文件上传?要考虑哪些问题?

QA

Step 1

Step 2

用途

相关问题