이 글에서는 Node.js재개 가능한 업로드를 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
일상 비즈니스 요구 사항: 사진, Excel 등 업로드. 결국 몇 M 크기도 서버에 빠르게 업로드할 수 있습니다.
동영상 및 기타 수백 M 또는 수 G 크기의 대용량 파일을 업로드하려면 오랜 시간을 기다려야 합니다.
이로 인해 대용량 파일을 업로드할 때 pause, 인터넷 연결 끊김 및 네트워크 불량의 경우 slicing+breakpoint 이력서을 사용하면 위의 상황을 처리하는 데 매우 유용할 수 있습니다. 솔루션 분석
슬라이싱
"]
특정 솔루션 프로세스
이 데모는 핵심 아이디어와 방법, 기타 기능을 제공합니다. : 파일 제한
,
lastModifiedDate 확인 파일 중복, 캐시 파일 정기 삭제 등의 기능 확장이 이 코드를 기반으로 추가될 수 있습니다. html
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,
});
});
};로그인 후 복사
프런트 엔드
첫 번째 업로드 요청 및 파일이 있는지 쿼리 , 또는 해당 슬라이스가 이미 존재합니다파일이 처음 업로드되면 슬라이싱은 0부터 시작됩니다파일에 해당 슬라이스가 이미 있으면 업로드 요청은 0부터 시작됩니다. Slices-
- 슬라이스 배열을 반복하고 각 슬라이스 파일을 수행합니다. Upload
Never 이 파일이 업로드된 경우 0이 반환되고 슬라이스 수는 0부터 시작됩니다. -
- 업로드된 파일 슬라이스를 수신하면 파일은
- count
및
total 을 통해 임시 저장 디렉터리 에 저장됩니다. -
업로드가 완료된 후 파일 저장 디렉터리를 만들고, 쓰기 가능한 스트림을 만들고, 쓰기 작업을 수행합니다.해당 임시 파일을 추출하여 배열에 넣고, 파일 디렉터리 배열을 반복하고, 파일 버퍼를 읽고 씁니다. 시퀀스
쓰기가 완료된 후 쓰기 가능한 스트림을 닫습니다. -
-
-
위 코드는 특정 비즈니스 프로세스의 변경 또는 편차를 포함합니다. 이는 특정 구현 방법 중 하나일 뿐입니다.
이 기사가 모든 사람에게 도움이 되기를 바랍니다. 글에 잘못된 점이 있으면 지적해 주시기 바랍니다.
위 코드 주소: https://github.com/Surprise-ling/uploadFile
더 많은 프로그래밍 관련 지식을 보려면
위 내용은 Node.js에서 중단점 재개를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
