19.大文件的断点续传如何实现，写出其核心思路代码，前后端都要写？

大文件的断点续传是指将大文件分成若干个小块进行上传，并在上传过程中支持断点续传，即在上传失败或者中断之后，可以从上一次中断的地方继续上传，而不需要重新上传整个文件。实现大文件的断点续传需要前后端共同配合，以下是它的核心思路代码：

前端代码：

// 上传文件
function uploadFile(file) {
  const CHUNK_SIZE = 1 * 1024 * 1024; // 每个分块的大小（1MB）
  const totalChunks = Math.ceil(file.size / CHUNK_SIZE); // 总共分为多少块
  let currentChunk = 0; // 当前上传的是第几块
  let uploadedChunks = []; // 已经上传成功的分块
  let xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.setRequestHeader('Content-Type', 'application/octet-stream');
  xhr.setRequestHeader('X-File-Name', file.name);
  xhr.setRequestHeader('X-File-Size', file.size);
  xhr.setRequestHeader('X-File-Total-Chunks', totalChunks);
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 上传成功
      console.log('上传成功');
    }
  };
  xhr.onerror = function() {
    // 上传失败
    console.log('上传失败');
  };
  function uploadChunk(start, end) {
    const chunk = file.slice(start, end);
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkIndex', currentChunk);
    formData.append('totalChunks', totalChunks);
    xhr.send(formData);
  }
  function uploadNextChunk() {
    const start = currentChunk * CHUNK_SIZE;
    const end = Math.min(start + CHUNK_SIZE, file.size);
    uploadChunk(start, end);
  }
  xhr.onprogress = function(e) {
    if (e.lengthComputable) {
      const percent = (e.loaded + getUploadedBytes()) / file.size * 100;
      console.log(`上传进度：${percent.toFixed(2)}%`);
    }
  };
  function getUploadedBytes() {
    return uploadedChunks.reduce((acc, chunk) => acc + chunk.size, 0);
  }
  function uploadResume() {
    uploadedChunks.forEach(chunk => {
      const start = chunk.index * CHUNK_SIZE;
      const end = start + chunk.size;
      uploadChunk(start, end);
    });
  }
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      if (response.code === 0) {
        // 上传成功
        uploadedChunks.push({
          index: currentChunk,
          size: response.size
        });
        if (uploadedChunks.length === totalChunks) {
          // 所有分块上传完成
          xhr.onload();
        } else {
          // 继续上传下一块
          currentChunk++;
          uploadNextChunk();
        }
      } else if (response.code === 1) {
        // 分块已经上传过
        uploadedChunks.push({
          index: currentChunk,
          size: response.size
        });
        if (uploadedChunks.length === totalChunks) {
          // 所有分块上传完成
          xhr.onload();
        } else {
          // 继续上传下一块
          currentChunk++;
          uploadNextChunk();
        }
      } else if (response.code === 2) {
        // 服务器已经有部分数据，从已上传完的地方继续上传
        uploadedChunks = response.uploadedChunks;
        currentChunk = uploadedChunks.length;
        uploadResume();
      } else {
        // 上传失败
        xhr.onerror();
      }
    }
  };
  // 开始上传
  uploadNextChunk();
}

以上是前端的核心代码实现，该代码使用XMLHttpRequest对象进行上传文件，支持分块上传，并在上传过程中支持断点续传。其中，使用了XHR的onprogress事件来实现上传进度的显示。需要注意的是，由于不同浏览器对FormData对象的支持程度不同，因此在实际使用中可能需要进行一些兼容处理。

后端代码：

const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');
const multer = require('multer');
const uploadDir = path.resolve(__dirname, 'uploads');
const port = 3000;
const uploadedChunks = {}; // 已经上传成功的分块
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, uploadDir);
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname);
  }
});
const upload = multer({ storage }).single('chunk');
// 处理上传请求
app.post('/upload', function(req, res) {
  const chunkIndex = parseInt(req.body.chunkIndex);
  const totalChunks = parseInt(req.body.totalChunks);
  const filePath = path.resolve(uploadDir, req.headers['x-file-name']);
  const chunkFilePath = `${filePath}.${chunkIndex}`;
  if (uploadedChunks[chunkIndex]) {
    // 分块已经上传过
    res.json({
      code: 1,
      size: uploadedChunks[chunkIndex]
    });
    return;
  }
  if (fs.existsSync(chunkFilePath)) {
    // 分块已经上传过
    uploadedChunks[chunkIndex] = fs.statSync(chunkFilePath).size;
    res.json({
      code: 1,
      size: uploadedChunks[chunkIndex]
    });
    return;
  }
  upload(req, res, function(err) {
    if (err) {
      // 上传失败
      res.json({
        code: -1,
        message: err.message
      });
      return;
    }
    // 上传成功
    const size = fs.statSync(chunkFilePath).size;
    uploadedChunks[chunkIndex] = size;
    if (Object.keys(uploadedChunks).length === totalChunks) {
      // 所有分块上传完成
      const ws = fs.createWriteStream(filePath);
      for (let i = 0; i < totalChunks; i++) {
        const chunkFilePath = `${filePath}.${i}`;
        const rs = fs.createReadStream(chunkFilePath);
        rs.pipe(ws, { end: false });
        rs.on('end', function() {
          fs.unlinkSync(chunkFilePath);
        });
      }
      ws.on('finish', function() {
        res.json({
          code: 0,
          message: '上传成功',
          size: fs.statSync(filePath).size
        });
      });
    } else {
      // 继续上传下一块
      res.json({
        code: 2,
        uploadedChunks: uploadedChunks
      });
    }
  });
});
app.listen(port, function() {
  console.log(`Server is running on port ${port}`);
});

以上是后端的核心代码实现，该代码使用了Express框架和Multer中间件进行文件上传的处理。在上传过程中，服务器会检查每个分块是否已经上传过，如果已经上传过，则返回已上传的大小；否则，继续接收分块数据，并将分块数据保存到本地文件中。当所有分块上传完成后，服务器会将所有分块合并成一个完整的文件，并将合并后的文件保存到本地磁盘中。需要注意的是，在合并分块的过程中，需要使用一个可写流和多个可读流进行数据的拼接和写入，同时需要在每个分块写入完成之后，删除本地的分块文件。

综上所述，实现大文件的断点续传需要前后端配合完成，前端代码负责将文件分成若干个小块，使用XMLHttpRequest对象进行上传，并在上传过程中支持断点续传；后端代码负责接收分块数据，保存到本地磁盘中，并在所有分块上传完成后将它们合并成一个完整的文件。