分片上传,分片合并

embedded/2025/1/16 0:50:46/

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

前端代码(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; //每个分片大小为5MBvar 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):

javascript">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事件,表示文件上传完成。


http://www.ppmy.cn/embedded/32069.html

相关文章

深度学习之基于Matlab卷积神经网络验证码识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着互联网的发展&#xff0c;验证码作为一种常用的安全验证手段&#xff0c;被广泛应用于各种网站和…

深度学习训练八股

一、模型中的函数的定义 1.torchmetrics.AUROC &#xff08;1&#xff09;.binary >>> from torch import tensor >>> preds tensor([0.13, 0.26, 0.08, 0.19, 0.34]) >>> target tensor([0, 0, 1, 1, 1]) >>> auroc AUROC(task&quo…

C++list的模拟实现

文章目录 一、观察源码二、模拟实现1. 节点结构体2. list类3. 迭代器的定义与实现&#xff08;1&#xff09; 前置--后置--模拟实现&#xff08;2&#xff09; *和->重载模拟实现&#xff08;3&#xff09; 和!重载实现 4. list成员函数模拟实现。&#xff08;1&#xff09;…

4_C语言复杂表达式与指针高级应用

指针数组与数组指针 字面意思来理解指针数组与数组指针 指针数组的实质是一个数组&#xff0c; 这个数组中存储的内容全部是指针变量。 数组指针的实质是一个指针&#xff0c; 这个指针指向的是一个数组。 分析指针数组与数组指针的表达式 int * p[5]; 指针数组 int (*p)[5]…

华为 huawei 交换机 配置 MUX VLAN 示例(汇聚层设备)

组网需求 在企业网络中&#xff0c;企业所有员工都可以访问企业的服务器。但对于企业来说&#xff0c;希望企业内部部分员工之间可以互相交流&#xff0c;而部分员工之间是隔离的&#xff0c;不能够互相访问。 如 图 6-4 所示&#xff0c; Switch1 位于网络的汇聚层&#xff0…

二叉树的直径

题目描述&#xff1a;给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。两节点之间路径的 长度 由它们之间边数表示。 示例 1&#xff1a; 输入&#xff1a;root […

45. UE5 RPG 使用元属性(Meta Attributes)以及使用Set by Caller修改伤害

在RPG游戏中&#xff0c;我们是不会直接修改生命值的属性&#xff0c;是因为在修改角色属性时&#xff0c;需要获取角色的属性并进行复杂的计算&#xff0c;所以&#xff0c;我们正常情况下使用元属性&#xff08;Meta Attributes&#xff09;作为计算的中间的媒。在服务器上先…

QT:输入类控件的使用

LineEdit 录入个人信息 #include "widget.h" #include "ui_widget.h" #include <QDebug> #include <QString>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);// 初始化输入框ui->lineEdit…