Maison > Article > interface Web > Comment implémenter le téléchargement partitionné dans Node.js ? Présentation de la méthode
NodeComment implémenter le téléchargement partitionné ? L'article suivant vous présentera la méthode d'implémentation du téléchargement partitionné dans Node.js. J'espère qu'il vous sera utile !
Le téléchargement de fichiers volumineux prendra beaucoup de temps et le téléchargement peut échouer à mi-chemin. À l’heure actuelle, nous avons besoin que le front-end et le back-end coopèrent pour résoudre ce problème.
Étapes de la solution :
Fragmentation des fichiers, réduisant le temps consommé par chaque requête. Si une requête échoue, vous pouvez la télécharger séparément au lieu de recommencer à zéro
Avertissez le serveur pour qu'il fusionne les fragments de fichiers
Contrôlez le nombre de requêtes simultanées pour éviter un débordement de mémoire du navigateur
Lorsqu'une requête échoue en raison du réseau ou pour d'autres raisons, nous renvoyons la requête
En JavaScript, l'objet FIle est une sous-classe de l'objet 'Blob'. Cet objet contient une méthode importante slice, grâce à laquelle nous pouvons diviser le fichier binaire comme ceci :
<!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>
Si le fichier est volumineux, les tranches se divisent comme ceci. sera beaucoup et le navigateur lancera un grand nombre de requêtes dans un court laps de temps, ce qui peut entraîner un épuisement de la mémoire, un contrôle de concurrence est donc nécessaire.
Ici, nous combinons la méthode Promise.race() pour contrôler le nombre de requêtes simultanées et éviter le débordement de mémoire du navigateur.
// 加入并发控制 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(() => { // 从并发池中移除已经完成的请求 let index = pool.findIndex((t) => t === task); pool.splice(index); }); // 把请求放入并发池中,如果已经达到最大并发量 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 = [] // 并发池 let max = 3 // 最大并发数 let finish = 0 // 完成数量 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)=>{ // 从并发池中移除已经完成的请求 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) }
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/') })
Pour plus de connaissances sur les nœuds, veuillez visiter : Tutoriel Nodejs !
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!