Cet article vous présentera comment implémenter le transfert de reprise du point d'arrêt Node.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
Besoins professionnels habituels : télécharger des images, Excel, etc. Après tout, la taille de quelques M peut être téléchargée au serveur rapidement.
Pour télécharger des fichiers volumineux tels que des vidéos, qui font des centaines de M ou plusieurs G, vous devez attendre longtemps.
Cela a produit des solutions correspondantes. Pour pause lors du téléchargement de fichiers volumineux, déconnexion, mauvais réseau, utilisez Slicing+La reprise du point d'arrêt peut très bien gérer la situation ci-dessus
Le découpage
Reprendre le point d'arrêt
[Apprentissage recommandé : "Tutoriel Nodejs"]
Cette démo fournit des points clés, des idées et des méthodes, d'autres des fonctions telles que : Limite de fichiers, répétabilité du fichier de vérification lastModifiedDate, Effacement régulier du fichier cache et d'autres extensions fonctionnelles peuvent être ajoutées dans ce code ajouté en fonction.
<input class="video" type="file" />
<button type="submit" onclick="handleVideo(event, '.video', 'video')">
提交
</button>let count = 0; // 记录需要上传的文件下标
const handleVideo = async (event, name, url) => {
// 阻止浏览器默认表单事件
event.preventDefault();
let currentSize = document.querySelector("h2");
let files = document.querySelector(name).files;
// 默认切片数量
const sectionLength = 100;
// 首先请求接口，获取服务器是否存在此文件
// count为0则是第一次上传，count不为0则服务器存在此文件，返回已上传的切片数
count = await handleCancel(files[0]);
// 申明存放切片的数组对象
let fileCurrent = [];
// 循环file文件对象
for (const file of [...files]) {
// 得出每个切片的大小
let itemSize = Math.ceil(file.size / sectionLength);
// 循环文件size，文件blob存入数组
let current = 0;
for (current; current < file.size; current += itemSize) {
fileCurrent.push({ file: file.slice(current, current + itemSize) });
}
// axios模拟手动取消请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 当断点续传时，处理切片数量，已上传切片则不需要再次请求上传
fileCurrent =
count === 0 ? fileCurrent : fileCurrent.slice(count, sectionLength);
// 循环切片请求接口
for (const [index, item] of fileCurrent.entries()) {
// 模拟请求暂停 || 网络断开
if (index > 90) {
source.cancel("取消请求");
}
// 存入文件相关信息
// file为切片blob对象
// filename为文件名
// index为当前切片数
// total为总切片数
let formData = new FormData();
formData.append("file", item.file);
formData.append("filename", file.name);
formData.append("total", sectionLength);
formData.append("index", index + count + 1);
await axios({
url: `http://localhost:8080/${url}`,
method: "POST",
data: formData,
cancelToken: source.token,
})
.then((response) => {
// 返回数据显示进度
currentSize.innerHTML = `进度${response.data.size}%`;
})
.catch((err) => {
console.log(err);
});
}
}
};
// 请求接口，查询上传文件是否存在
// count为0表示不存在，count不为0则已上传对应切片数
const handleCancel = (file) => {
return axios({
method: "post",
url: "http://localhost:8080/getSize",
headers: { "Content-Type": "application/json; charset = utf-8" },
data: {
fileName: file.name,
},
})
.then((res) => {
return res.data.count;
})
.catch((err) => {
console.log(err);
});
};// 使用express构建服务器api
const express = require("express");
// 引入上传文件逻辑代码
const upload = require("./upload_file");
// 处理所有响应，设置跨域
app.all("*", (req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("Access-Control-Allow-Headers", "Content-Type, X-Requested-With ");
res.header("X-Powered-By", " 3.2.1");
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
const app = express();
app.use(bodyParser.json({ type: "application/*+json" }));
// 视频上传（查询当前切片数）
app.post("/getSize", upload.getSize);
// 视频上传接口
app.post("/video", upload.video);
// 开启本地端口侦听
app.listen(8080);upload_file
// 文件上传模块
const formidable = require("formidable");
// 文件系统模块
const fs = require("fs");
// 系统路径模块
const path = require("path");
// 操作写入文件流
const handleStream = (item, writeStream) => {
// 读取对应目录文件buffer
const readFile = fs.readFileSync(item);
// 将读取的buffer || chunk写入到stream中
writeStream.write(readFile);
// 写入完后，清除暂存的切片文件
fs.unlink(item, () => {});
};
// 视频上传(切片)
module.exports.video = (req, res) => {
// 创建解析对象
const form = new formidable.IncomingForm();
// 设置视频文件上传路径
let dirPath = path.join(__dirname, "video");
form.uploadDir = dirPath;
// 是否保留上传文件名后缀
form.keepExtensions = true;
// err 错误对象 如果解析失败包含错误信息
// fields 包含除了二进制以外的formData的key-value对象
// file 对象类型 上传文件的信息
form.parse(req, async (err, fields, file) => {
// 获取上传文件blob对象
let files = file.file;
// 获取当前切片index
let index = fields.index;
// 获取总切片数
let total = fields.total;
// 获取文件名
let filename = fields.filename;
// 重写上传文件名，设置暂存目录
let url =
dirPath +
"/" +
filename.split(".")[0] +
`_${index}.` +
filename.split(".")[1];
try {
// 同步修改上传文件名
fs.renameSync(files.path, url);
console.log(url);
// 异步处理
setTimeout(() => {
// 判断是否是最后一个切片上传完成，拼接写入全部视频
if (index === total) {
// 同步创建新目录，用以存放完整视频
let newDir = __dirname + `/uploadFiles/${Date.now()}`;
// 创建目录
fs.mkdirSync(newDir);
// 创建可写流，用以写入文件
let writeStream = fs.createWriteStream(newDir + `/${filename}`);
let fsList = [];
// 取出所有切片文件，放入数组
for (let i = 0; i < total; i++) {
const fsUrl =
dirPath +
"/" +
filename.split(".")[0] +
`_${i + 1}.` +
filename.split(".")[1];
fsList.push(fsUrl);
}
// 循环切片文件数组，进行stream流的写入
for (let item of fsList) {
handleStream(item, writeStream);
}
// 全部写入，关闭stream写入流
writeStream.end();
}
}, 100);
} catch (e) {
console.log(e);
}
res.send({
code: 0,
msg: "上传成功",
size: index,
});
});
};
// 获取文件切片数
module.exports.getSize = (req, res) => {
let count = 0;
req.setEncoding("utf8");
req.on("data", function (data) {
let name = JSON.parse(data);
let dirPath = path.join(__dirname, "video");
// 计算已上传的切片文件个数
let files = fs.readdirSync(dirPath);
files.forEach((item, index) => {
let url =
name.fileName.split(".")[0] +
`_${index + 1}.` +
name.fileName.split(".")[1];
if (files.includes(url)) {
++count;
}
});
res.send({
code: 0,
msg: "请继续上传",
count,
});
});
};Le code ci-dessus implique des changements ou des écarts dans des processus métier spécifiques. Ce n'en est qu'un. des modalités spécifiques de mise en œuvre.
J'espère que cet article pourra être utile à tout le monde. S'il y a quelque chose qui ne va pas dans l'écriture, j'espère que vous pourrez me donner quelques conseils.
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment rembourser Douyin rechargé Doucoin
De quelle marque est le téléphone mobile Nubia ?
Que sont les éditeurs de texte Java ?
Quelles sont les méthodes d'analyse des données ?
Comment créer un fichier iso
ps quitter la touche de raccourci plein écran
Que signifie le masque PS ?
utilisation de la commande net use
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
