分片上传,分片合并

面是一种基于前端分片上传,后端合并的方法的代码实现:

前端代码(HTML + JavaScript):

<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload</button>

<script>
function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];

  var chunkSize = 5 * 1024 * 1024; //每个分片大小为5MB
  var totalChunks = Math.ceil(file.size / chunkSize); //总分片数
  var currentChunk = 0; //当前上传的分片序号

  var reader = new FileReader();
  reader.onload = function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.setRequestHeader('Content-Type', 'application/octet-stream');
    xhr.setRequestHeader('X-Chunk-Number', currentChunk);
    xhr.setRequestHeader('X-Total-Chunks', totalChunks);

    xhr.onload = function() {
      currentChunk++;
      if (currentChunk < totalChunks) {
        uploadChunk();
      } else {
        alert('File uploaded successfully!');
      }
    };

    xhr.send(e.target.result);
  };

  function uploadChunk() {
    var start = currentChunk * chunkSize;
    var end = Math.min(start + chunkSize, file.size);
    var chunk = file.slice(start, end);
    reader.readAsArrayBuffer(chunk);
  }

  uploadChunk();
}
</script>

后端代码(Node.js + Express):

const express = require('express');
const app = express();
const fs = require('fs');

app.use(express.json());

app.post('/upload', (req, res) => {
  const chunkNumber = req.headers['x-chunk-number'];
  const totalChunks = req.headers['x-total-chunks'];
  const fileStream = fs.createWriteStream('uploaded_file', { flags: 'a' });

  req.pipe(fileStream);

  if (chunkNumber == totalChunks - 1) {
    fileStream.on('finish', () => {
      res.sendStatus(200);
    });
  }
});

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

前端使用了HTML的&lt;input type="file">标签和JavaScript的FileReader对象来实现分片读取文件,并通过XMLHttpRequest发送每个分片到后端。

后端使用Node.js和Express框架,接收到每个分片后将其写入到文件中,当收到最后一个分片时,触发finish事件,表示文件上传完成。

相关推荐

  1. 分片分片合并

    2024-05-04 06:02:04       28 阅读
  2. 大文件的分片和断点

    2024-05-04 06:02:04       40 阅读
  3. Springboot 分片客户端Demo

    2024-05-04 06:02:04       47 阅读
  4. vue3 文件分片

    2024-05-04 06:02:04       28 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-04 06:02:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-04 06:02:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-04 06:02:04       82 阅读
  4. Python语言-面向对象

    2024-05-04 06:02:04       91 阅读

热门阅读

  1. 蓝桥杯国赛填空题(跑步计划)

    2024-05-04 06:02:04       31 阅读
  2. 初识Vue-脚本架(如何创建vue项目并使用)

    2024-05-04 06:02:04       38 阅读
  3. uniapp+axios请求的封装

    2024-05-04 06:02:04       32 阅读
  4. 蚂蚁笔记(非官方版)复活

    2024-05-04 06:02:04       30 阅读
  5. 生成对抗网络(GAN)入门

    2024-05-04 06:02:04       23 阅读
  6. 预编码算法学习笔记

    2024-05-04 06:02:04       27 阅读
  7. Multi-Thread TCP Server & Client

    2024-05-04 06:02:04       35 阅读
  8. ElasticSearch安装和可视化安装

    2024-05-04 06:02:04       29 阅读
  9. 如何看待AIGC技术?【模板】

    2024-05-04 06:02:04       32 阅读