JS如何实现文件分片上传-js教程-PHP中文网

JS如何实现文件分片上传

煙雲

发布： 2025-08-25 13:21:01

原创

1013人浏览过

文件分片上传通过将大文件分割为多个小块并行上传，提升速度与稳定性。1. 核心思路是将文件切片上传，服务器接收后合并，避免网络波动导致整体重传；2. 客户端实现中，使用file api切割文件，通过formdata发送每个分片及元信息（如分片编号、总数、文件名），并用fetch或xmlhttprequest上传；3. 服务器端需保存分片，检查是否全部到达后再合并，node.js示例使用multer存储分片并触发合并逻辑；4. 上传中断可通过客户端重试失败分片、服务端校验已传分片实现断点续传；5. 分片大小建议2mb至5mb，权衡请求开销与重传成本，依据网络、文件大小和服务器性能调整；6. 上传进度可通过xmlhttprequest的upload.onprogress事件实时计算并更新；7. 安全性需校验文件类型、权限控制接口访问，并使用https加密传输。该方案完整支持高效、稳定、可恢复的大文件上传，最终在所有分片成功上传后完成合并，确保用户体验与数据安全。

JS如何实现文件分片上传

将大文件分割成小块，并行上传，提高上传速度和稳定性。

解决方案

文件分片上传的核心思路是将一个大文件分割成多个小文件（即分片），然后并发地将这些分片上传到服务器。服务器接收到所有分片后，再将它们合并成完整的文件。这种方式可以有效利用带宽，提高上传速度，并且在网络环境不稳定时，可以只重传失败的分片，而不是整个文件。

以下是一个简化的JS实现文件分片上传的示例：

<!DOCTYPE html>
<html>
<head>
  <title>文件分片上传</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button id="uploadButton">上传</button>
  <script>
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadButton');
    const chunkSize = 1024 * 1024 * 2; // 2MB 一个分片
    const uploadUrl = '/upload'; // 你的上传接口

    uploadButton.addEventListener('click', async () => {
      const file = fileInput.files[0];
      if (!file) {
        alert('请选择文件');
        return;
      }

      const totalChunks = Math.ceil(file.size / chunkSize);
      let currentChunk = 0;

      while (currentChunk < totalChunks) {
        const start = currentChunk * chunkSize;
        const end = Math.min(file.size, start + chunkSize);
        const chunk = file.slice(start, end);

        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('chunkNumber', currentChunk + 1);
        formData.append('totalChunks', totalChunks);
        formData.append('filename', file.name); // 传递文件名

        try {
          const response = await fetch(uploadUrl, {
            method: 'POST',
            body: formData,
          });

          if (!response.ok) {
            throw new Error(`上传失败，状态码：${response.status}`);
          }

          const data = await response.json();
          console.log(`分片 ${currentChunk + 1} 上传成功`, data);

        } catch (error) {
          console.error(`分片 ${currentChunk + 1} 上传失败`, error);
          // 可以选择重试，或者提示用户
          break; // 停止上传
        }

        currentChunk++;
      }

      if (currentChunk === totalChunks) {
        alert('文件上传完成');
      }
    });
  </script>
</body>
</html>

登录后复制

这个例子中，我们首先获取用户选择的文件，然后计算需要分割成多少个分片。接着，我们循环地将每个分片上传到服务器。每次上传都将分片数据、分片编号、总分片数和文件名一起发送到服务器。服务器端需要能够接收这些数据，并将分片保存起来，最后在所有分片都上传完成后，将它们合并成完整的文件。

服务器端 (Node.js 示例)

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');

const app = express();
const uploadDir = path.join(__dirname, 'uploads');

if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    const filename = req.body.filename; // 从请求体中获取文件名
    const chunkNumber = req.body.chunkNumber;
    cb(null, `${filename}_${chunkNumber}`); // 分片命名
  }
});

const upload = multer({ storage: storage });

app.use(express.static('public')); // 静态文件服务，用于提供 HTML

app.post('/upload', upload.single('file'), (req, res) => {
  console.log('分片上传成功', req.file.filename);
  res.json({ message: '分片上传成功' });

  // 检查是否所有分片都已上传，如果是，则合并文件
  const filename = req.body.filename;
  const totalChunks = parseInt(req.body.totalChunks);
  const chunkFiles = [];

  for (let i = 1; i <= totalChunks; i++) {
    chunkFiles.push(path.join(uploadDir, `${filename}_${i}`));
  }

  const allChunksExist = chunkFiles.every(file => fs.existsSync(file));

  if (allChunksExist) {
    console.log('所有分片已上传，开始合并');
    const finalFile = path.join(uploadDir, filename);
    const writeStream = fs.createWriteStream(finalFile);

    chunkFiles.forEach(chunkFile => {
      const readStream = fs.createReadStream(chunkFile);
      readStream.pipe(writeStream, { end: false }); // 不要关闭 writeStream
      readStream.on('end', () => {
        fs.unlinkSync(chunkFile); // 删除分片
      });
    });

    writeStream.on('finish', () => {
      console.log('文件合并完成');
    });
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

登录后复制

这个Node.js示例使用了

express

登录后复制

和

multer

登录后复制

库来处理文件上传。

multer

登录后复制

中间件负责接收上传的文件，并将其保存到服务器的

uploads

登录后复制

目录下。每次上传成功后，服务器会检查是否所有分片都已上传，如果是，则将它们合并成完整的文件。

如何处理上传中断和重试？

webuploader-js实现多图片批量上传插件

101

查看详情

上传中断是分片上传中常见的问题。为了解决这个问题，可以在客户端和服务器端都实现重试机制。

客户端重试: 如果某个分片上传失败，客户端可以尝试重新上传该分片。可以设置最大重试次数，避免无限循环。
服务器端校验: 服务器端可以记录已接收的分片，并在接收到新的分片时，检查该分片是否已经存在。如果已经存在，可以跳过该分片的上传。这样可以避免重复上传。

如何优化分片大小的选择？

分片大小的选择会影响上传速度和稳定性。分片太小，会导致过多的HTTP请求，增加网络开销。分片太大，如果上传失败，则需要重传整个分片，浪费带宽。

网络环境: 在网络环境较好的情况下，可以选择较大的分片大小。在网络环境较差的情况下，可以选择较小的分片大小。
文件大小: 对于较小的文件，可以选择较大的分片大小。对于较大的文件，可以选择较小的分片大小。
服务器性能: 服务器性能也会影响分片大小的选择。如果服务器性能较好，可以选择较大的分片大小。如果服务器性能较差，可以选择较小的分片大小。

一个常见的做法是使用 2MB 到 5MB 的分片大小。

如何处理上传进度显示？

显示上传进度可以提高用户体验。可以使用

XMLHttpRequest

登录后复制

对象的

upload.onprogress

登录后复制

事件来监听上传进度。

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`上传进度: ${percentComplete}%`);
    // 更新进度条
  }
};

xhr.open('POST', uploadUrl);
xhr.send(formData);

登录后复制

安全性考虑

分片上传也需要考虑安全性问题。