js实现大文件分片上传详细教程

再来一碗白米饭
1,423 阅读3分钟

大文件分片上传是一个常见的Web开发需求，特别是在处理大文件上传时，分片上传可以提高上传的可靠性和效率。下面是一个实现大文件分片上传的步骤和分析教程：

  1. 选择前端框架或库： 首先，你需要选择一个前端框架或库，使得分片上传的实现更加方便。一些流行的选择包括React、Vue.js、Angular等。这些框架都有现成的组件和工具，可以简化前端代码的编写。
  2. 切分大文件： 使用File API或Blob API，可以将大文件切分成较小的片段，通常称为分片（chunks）。通常，每个分片大小可以根据具体需求设置，常见的大小为1MB或4MB。
  3. 上传文件分片： 将分片逐个上传到服务器。这里可以使用XMLHttpRequest、Fetch API或其他AJAX技术，将分片发送到服务器。每个分片都需要携带一些标识信息，如文件名、分片索引等，以便服务器正确地组装文件。
  4. 处理上传进度： 监听上传进度，可以在上传过程中显示进度条或百分比，让用户了解上传的进展情况。这可以通过监视XMLHttpRequest或Fetch API的progress事件来实现。
  5. 服务器端处理： 在服务器端，你需要处理收到的分片。每个分片都应该保存在一个临时位置。当所有分片都上传完成后，服务器需要将它们组装成原始文件。
  6. 断点续传（可选） ： 如果用户在上传过程中中断了连接，你可能希望支持断点续传，即用户重新连接后能够继续上传。为了实现断点续传，服务器需要保留已上传分片的信息，并在用户继续上传时恢复上传进度。
  7. 清理临时文件： 在文件上传完成后，服务器应该清理临时文件，以避免占用过多的磁盘空间。
  8. 错误处理： 考虑到网络波动和其他可能出现的问题，对上传过程中的错误进行适当处理，以提供更好的用户体验。
  9. 安全性考虑： 在实现文件上传功能时，要注意安全性问题，避免可能的安全漏洞，如文件注入、目录遍历等。
  10. 部署和测试： 完成代码后，确保在开发环境中进行充分测试，然后部署到生产环境。

以下是一个使用纯JavaScript（没有使用任何前端框架）实现大文件分片上传的详细教程。我们将分为前端和后端两部分来实现。

前端实现：

  1. HTML 结构：
<!DOCTYPE html>
<html>
<head>
  <title>Large File Upload</title>
</head>
<body>
  <input type="file" id="fileInput" />
  <button onclick="uploadFile()">Upload</button>
  <progress id="progressBar" value="0" max="100"></progress>

  <script src="script.js"></script>
</body>
</html>

JavaScript（script.js） ：

async function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const chunkSize = 1024 * 1024; // 1MB chunks (you can adjust the size as needed)
  let start = 0;

  while (start < file.size) {
    const chunk = file.slice(start, start + chunkSize);
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('filename', file.name);
    formData.append('chunkIndex', start / chunkSize);

    // Send the chunk to the server using Fetch API or XMLHttpRequest
    await fetch('/upload', {
      method: 'POST',
      body: formData,
    });

    start += chunkSize;
    const progress = (start / file.size) * 100;
    document.getElementById('progressBar').value = progress;
  }

  alert('File uploaded successfully!');
}

后端实现（Node.js 示例）：

在后端，我们使用Node.js和Express框架来处理分片上传。

  1. 首先确保你已经安装了Node.js和Express框架。在项目文件夹中创建以下文件：

    • server.js
    • uploads 文件夹（用于保存上传的分片）

  2. server.js 文件内容：

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

const app = express();
const upload = multer({ dest: 'uploads/' });

// Serve the HTML file
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

// Handle the upload of individual file chunks
app.post('/upload', upload.single('file'), (req, res) => {
  const { filename, chunkIndex } = req.body;
  const chunkPath = req.file.path;
  const destination = path.join('uploads/', filename + '-' + chunkIndex);

  // Move the uploaded chunk to a specific location
  fs.renameSync(chunkPath, destination);

  res.sendStatus(200);
});

// Handle the merging of uploaded chunks into the final file
app.post('/merge', (req, res) => {
  const { filename, totalChunks } = req.body;
  const destination = path.join('uploads/', filename);
  const chunksFolder = path.join('uploads/');

  const writeStream = fs.createWriteStream(destination);
  for (let i = 0; i < totalChunks; i++) {
    const chunkPath = path.join(chunksFolder, filename + '-' + i);
    const chunkData = fs.readFileSync(chunkPath);
    writeStream.write(chunkData);
    fs.unlinkSync(chunkPath); // Remove the temporary chunk file after merging
  }

  writeStream.end();
  res.sendStatus(200);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
  1. 运行后端服务器：

在终端中进入项目目录，运行以下命令来启动服务器：

node server.js

现在，访问 http://localhost:3000/，选择大文件，点击"Upload"按钮，文件会被分片上传到服务器的uploads文件夹中。一旦所有分片上传完成，服务器将会将它们组装成原始文件。

请注意，以上示例并没有涉及断点续传等高级功能。在实际应用中，你可能需要更多的处理来实现更完整的大文件上传功能。此外，为了生产环境中的稳定性和性能，请务必考虑适当的错误处理、安全性措施和性能优化。

avatar
文章
阅读
粉丝