Node.js如何實現(xiàn)分片上傳
這篇文章主要介紹了Node.js如何實現(xiàn)分片上傳的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Node.js如何實現(xiàn)分片上傳文章都會有所收獲，下面我們一起來看看吧。
創(chuàng)新互聯(lián)是一家網(wǎng)站設計公司，集創(chuàng)意、互聯(lián)網(wǎng)應用、軟件技術為一體的創(chuàng)意網(wǎng)站建設服務商，主營產(chǎn)品：響應式網(wǎng)站設計、成都品牌網(wǎng)站建設、營銷型網(wǎng)站。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡互動的體驗，以及在手機等移動端的優(yōu)質(zhì)呈現(xiàn)。網(wǎng)站制作、做網(wǎng)站、移動互聯(lián)產(chǎn)品、網(wǎng)絡運營、VI設計、云產(chǎn)品.運維為核心業(yè)務。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務。
大文件上傳會消耗大量的時間，而且中途有可能上傳失敗。這時我們需要前端和后端配合來解決這個問題。
解決步驟：
文件分片，減少每次請求消耗的時間，如果某次請求失敗可以單獨上傳，而不是從頭開始
通知服務端合并文件分片
控制并發(fā)的請求數(shù)量，避免瀏覽器內(nèi)存溢出
當因為網(wǎng)絡或者其他原因?qū)е履炒蔚恼埱笫?，我們重新發(fā)送請求
文件的分片與合并
在JavaScript中，F(xiàn)Ile對象是' Blob '對象的子類，該對象包含一個重要的方法slice，通過該方法我們可以這樣分割二進制文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>
<body>
<input type="file" multiple="multiple" id="fileInput" />
<button onclick="SliceUpload()">上傳</button>
<script>
function SliceUpload() {
const file = document.getElementById('fileInput').files[0]
if (!file) return
// 文件分片
let size = 1024 * 50; //50KB 50KB Section size
let fileChunks = [];
let index = 0; //Section num
for (let cur = 0; cur < file.size; cur += size) {
fileChunks.push({
hash: index++,
chunk: file.slice(cur, cur + size),
});
}
// 上傳分片
const uploadList = fileChunks.map((item, index) => {
let formData = new FormData();
formData.append("filename", file.name);
formData.append("hash", item.hash);
formData.append("chunk", item.chunk);
return axios({
method: "post",
url: "/upload",
data: formData,
});
});
await Promise.all(uploadList);
// 所有分片上傳完成，通知服務器合并分片
await axios({
method: "get",
url: "/merge",
params: {
filename: file.name,
},
});
console.log("Upload to complete");
}
</script>
</body>
</html>并發(fā)控制
如果文件很大，這樣切分的分片會很多，瀏覽器短時間內(nèi)就會發(fā)起大量的請求，可能會導致內(nèi)存耗盡，所以要進行并發(fā)控制。
這里我們結合Promise.race()方法 控制并發(fā)請求的數(shù)量，避免瀏覽器內(nèi)存溢出。
// 加入并發(fā)控制
async function SliceUpload() {
const file = document.getElementById('fileInput').files[0]
if (!file) return
// 文件分片
let size = 1024 * 50; //50KB 50KB Section size
let fileChunks = [];
let index = 0; //Section num
for (let cur = 0; cur < file.size; cur += size) {
fileChunks.push({
hash: index++,
chunk: file.slice(cur, cur + size),
});
}
let pool = []; //Concurrent pool
let max = 3; //Maximum concurrency
for (let i = 0; i < fileChunks.length; i++) {
let item = fileChunks[i];
let formData = new FormData();
formData.append("filename", file.name);
formData.append("hash", item.hash);
formData.append("chunk", item.chunk);
// 上傳分片
let task = axios({
method: "post",
url: "/upload",
data: formData,
});
task.then(() => {
// 從并發(fā)池中移除已經(jīng)完成的請求
let index = pool.findIndex((t) => t === task);
pool.splice(index);
});
// 把請求放入并發(fā)池中，如果已經(jīng)達到最大并發(fā)量
pool.push(task);
if (pool.length === max) {
//All requests are requested complete
await Promise.race(pool);
}
}
// 所有分片上傳完成，通知服務器合并分片
await axios({
method: "get",
url: "/merge",
params: {
filename: file.name,
},
});
console.log("Upload to complete");
}使代碼可復用
function SliceUpload() {
const file = document.getElementById('fileInput').files[0]
if (!file) return
// 文件分片
let size = 1024 * 50; // 分片大小設置
let fileChunks = [];
let index = 0; // 分片序號
for (let cur = 0; cur < file.size; cur += size) {
fileChunks.push({
hash: index++,
chunk: file.slice(cur, cur + size),
});
}
const uploadFileChunks = async function(list){
if(list.length === 0){
// 所有分片上傳完成，通知如無
await axios({
method: 'get',
url: '/merge',
params: {
filename: file.name
}
});
console.log('Upload to complete')
return
}
let pool = [] // 并發(fā)池
let max = 3 // 最大并發(fā)數(shù)
let finish = 0 // 完成數(shù)量
let failList = [] // 失敗列表
for(let i=0;i<list.length;i++){
let item = list[i]
let formData = new FormData()
formData.append('filename', file.name)
formData.append('hash', item.hash)
formData.append('chunk', item.chunk)
let task = axios({
method: 'post',
url: '/upload',
data: formData
})
task.then((data)=>{
// 從并發(fā)池中移除已經(jīng)完成的請求
let index = pool.findIndex(t=> t===task)
pool.splice(index)
}).catch(()=>{
failList.push(item)
}).finally(()=>{
finish++
// 如果有失敗的重新上傳
if(finish===list.length){
uploadFileChunks(failList)
}
})
pool.push(task)
if(pool.length === max){
await Promise.race(pool)
}
}
}
uploadFileChunks(fileChunks)
}服務端接口實現(xiàn)
const express = require('express')
const multiparty = require('multiparty')
const fs = require('fs')
const path = require('path')
const { Buffer } = require('buffer')
// file path
const STATIC_FILES = path.join(__dirname, './static/files')
// Temporary path to upload files
const STATIC_TEMPORARY = path.join(__dirname, './static/temporary')
const server = express()
// Static file hosting
server.use(express.static(path.join(__dirname, './dist')))
// Interface for uploading slices
server.post('/upload', (req, res) => {
const form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
let filename = fields.filename[0]
let hash = fields.hash[0]
let chunk = files.chunk[0]
let dir = `${STATIC_TEMPORARY}/${filename}`
// console.log(filename, hash, chunk)
try {
if (!fs.existsSync(dir)) fs.mkdirSync(dir)
const buffer = fs.readFileSync(chunk.path)
const ws = fs.createWriteStream(`${dir}/${hash}`)
ws.write(buffer)
ws.close()
res.send(`${filename}-${hash} Section uploaded successfully`)
} catch (error) {
console.error(error)
res.status(500).send(`${filename}-${hash} Section uploading failed`)
}
})
})
//Merged slice interface
server.get('/merge', async (req, res) => {
const { filename } = req.query
try {
let len = 0
const bufferList = fs.readdirSync(`${STATIC_TEMPORARY}/${filename}`).map((hash,index) => {
const buffer = fs.readFileSync(`${STATIC_TEMPORARY}/${filename}/${index}`)
len += buffer.length
return buffer
});
//Merge files
const buffer = Buffer.concat(bufferList, len);
const ws = fs.createWriteStream(`${STATIC_FILES}/${filename}`)
ws.write(buffer);
ws.close();
res.send(`Section merge completed`);
} catch (error) {
console.error(error);
}
})
server.listen(3000, _ => {
console.log('http://localhost:3000/')
})關于“Node.js如何實現(xiàn)分片上傳”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Node.js如何實現(xiàn)分片上傳”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標題：Node.js如何實現(xiàn)分片上傳
URL地址：http://muchs.cn/article14/pihsge.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、響應式網(wǎng)站、品牌網(wǎng)站建設、商城網(wǎng)站、ChatGPT、搜索引擎優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 品牌網(wǎng)站設計開發(fā)要點 2016-11-09
- 品牌網(wǎng)站設計：如何制作設計一個好的網(wǎng)站？ 2016-10-06
- 網(wǎng)站制作專業(yè)公司更相符公司的成長請求 2022-06-04
- 深圳福田網(wǎng)站設計與制作，品牌網(wǎng)站設計制作的步驟是什么？ 2021-11-20
- 成都企業(yè)品牌網(wǎng)站設計的常見布局方式 2023-03-25
- 品牌網(wǎng)站設計怎樣做更加高端？ 2022-11-15
- 品牌網(wǎng)站設計的意義是什么，如何起到這種效果？ 2022-09-30
- 品牌網(wǎng)站設計對企業(yè)來說有什么意義 2021-10-27
- 高端品牌網(wǎng)站設計注重的五大要素 2022-08-23
- 如何做好網(wǎng)站設計？企業(yè)品牌網(wǎng)站設計重要指南 2022-08-16
- 品牌網(wǎng)站設計-好的用戶體驗更容易留住用戶 2022-04-30
- 品牌網(wǎng)站設計制作的簡單步驟 2022-12-03