Node.js 정지점 전송 실현
슬라이스
이 demo 는 관건 적 인 사고방식 과 방법 을 제공 합 니 다.예 를 들 어 파일 제한,lastModified Date 검사 파일 중복 성,캐 시 파일 정기 제거 등 기능 확장 은 이 코드 를 바탕 으로 추가 할 수 있 습 니 다.
html
<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);
//
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,
});
});
};
전단
상기 코드 는 구체 적 인 업무 절차 와 관련 되 어 변경 되 거나 편차 가 있 을 수 있 는데 이것 은 그 중의 구체 적 인 실현 방식 일 뿐이다.
이 글 이 여러분 에 게 도움 이 되 기 를 바 랍 니 다.잘못 쓴 부분 이 있 으 면 하나,둘 을 가르쳐 주시 기 바 랍 니 다.
이상 코드 주소:github.com/Surprise-li…
이상 은 Node.js 가 정지점 속전 을 실현 하 는 상세 한 내용 입 니 다.Node.js 정지점 속전 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Grunt에서 즉석 템플릿 엔진이 필요했기 때문에 마침내 만들었습니다.jade 라든지 ejs 라고도 좋지만, 보다 심플하게 하고 싶다고 생각해. json을 떨어 뜨렸다. 플레이스홀더(:TAG)를 마련해, 이런 HTML 만들어 둔다. template.html 자리 표시자의 문자열을 키로...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
