首页-教程-Web前端

Node.js怎么实现分片上传？方法介绍

 2739

Node怎么实现分片上传？下面本篇文章给大家介绍一下Node.js实现分片上传的方法，希望对大家有所帮助！


Node.js怎么实现分片上传？方法介绍


大文件上传会消耗大量的时间，而且中途有可能上传失败。这时我们需要前端和后端配合来解决这个问题。

解决步骤：

文件分片，减少每次请求消耗的时间，如果某次请求失败可以单独上传，而不是从头开始

通知服务端合并文件分片

控制并发的请求数量，避免浏览器内存溢出

当因为网络或者其他原因导致某次的请求失败，我们重新发送请求

文件的分片与合并

在JavaScript中，FIle对象是' Blob '对象的子类，该对象包含一个重要的方法slice，通过该方法我们可以这样分割二进制文件:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
  9. </head>
  10. <body>
  11.     <input type="file" multiple="multiple" id="fileInput" />
  12.     <button onclick="SliceUpload()">上传</button>  
  13.     <script>
  14.         function SliceUpload() {
  15.             const file = document.getElementById('fileInput').files[0]
  16.             if (!file) return
  17.  
  18.             // 文件分片
  19.             let size = 1024 * 50; //50KB 50KB Section size
  20.             let fileChunks = [];
  21.             let index = 0;        //Section num
  22.             for (let cur = 0; cur < file.size; cur += size) {
  23.                 fileChunks.push({
  24.                     hash: index++,
  25.                     chunk: file.slice(cur, cur + size),
  26.                 });
  27.             }
  28.  
  29.             // 上传分片
  30.             const uploadList = fileChunks.map((item, index) => {
  31.                 let formData = new FormData();
  32.                 formData.append("filename", file.name);
  33.                 formData.append("hash", item.hash);
  34.                 formData.append("chunk", item.chunk);
  35.                 return axios({
  36.                     method: "post",
  37.                     url: "/upload",
  38.                     data: formData,
  39.                 });
  40.             });
  41.             await Promise.all(uploadList);
  42.  
  43.             // 所有分片上传完成，通知服务器合并分片
  44.             await axios({
  45.                 method: "get",
  46.                 url: "/merge",
  47.                 params: {
  48.                     filename: file.name,
  49.                 },
  50.             });
  51.             console.log("Upload to complete");
  52.         }
  53.     </script>
  54. </body>
  55. </html>


并发控制

如果文件很大，这样切分的分片会很多，浏览器短时间内就会发起大量的请求，可能会导致内存耗尽，所以要进行并发控制。

这里我们结合Promise.race()方法 控制并发请求的数量，避免浏览器内存溢出。

  1. // 加入并发控制
  2. async function SliceUpload() {
  3.     const file = document.getElementById('fileInput').files[0]
  4.     if (!file) return
  5.  
  6.     // 文件分片
  7.     let size = 1024 * 50; //50KB 50KB Section size
  8.     let fileChunks = [];
  9.     let index = 0;        //Section num
  10.     for (let cur = 0; cur < file.size; cur += size) {
  11.         fileChunks.push({
  12.             hash: index++,
  13.             chunk: file.slice(cur, cur + size),
  14.         });
  15.     }
  16.  
  17.     let pool = []; //Concurrent pool
  18.     let max = 3; //Maximum concurrency
  19.     for (let i = 0; i < fileChunks.length; i++) {
  20.         let item = fileChunks[i];
  21.         let formData = new FormData();
  22.         formData.append("filename", file.name);
  23.         formData.append("hash", item.hash);
  24.         formData.append("chunk", item.chunk);
  25.  
  26.         // 上传分片
  27.         let task = axios({
  28.             method: "post",
  29.             url: "/upload",
  30.             data: formData,
  31.         });
  32.         task.then(() => {
  33.         // 从并发池中移除已经完成的请求
  34.         let index = pool.findIndex((t) => t === task);
  35.             pool.splice(index);
  36.         });
  37.  
  38.         // 把请求放入并发池中，如果已经达到最大并发量
  39.         pool.push(task);
  40.         if (pool.length === max) {
  41.             //All requests are requested complete
  42.             await Promise.race(pool);
  43.         }
  44.     }
  45.  
  46.     // 所有分片上传完成，通知服务器合并分片
  47.     await axios({
  48.         method: "get",
  49.         url: "/merge",
  50.         params: {
  51.             filename: file.name,
  52.         },
  53.     });
  54.     console.log("Upload to complete");
  55. }


使代码可复用

  1. function SliceUpload() {
  2.     const file = document.getElementById('fileInput').files[0]
  3.     if (!file) return
  4.  
  5.     // 文件分片
  6.     let size = 1024 * 50; // 分片大小设置
  7.     let fileChunks = [];
  8.     let index = 0;        // 分片序号
  9.     for (let cur = 0; cur < file.size; cur += size) {
  10.         fileChunks.push({
  11.             hash: index++,
  12.             chunk: file.slice(cur, cur + size),
  13.         });
  14.     }
  15.  
  16.     const uploadFileChunks = async function(list){
  17.         if(list.length === 0){
  18.             // 所有分片上传完成，通知如无
  19.             await axios({
  20.                 method: 'get',
  21.                 url: '/merge',
  22.                 params: {
  23.                     filename: file.name
  24.                 }
  25.             });
  26.             console.log('Upload to complete')
  27.             return
  28.         }
  29.  
  30.         let pool = []       // 并发池
  31.         let max = 3         // 最大并发数
  32.         let finish = 0      // 完成数量
  33.         let failList = []   // 失败列表
  34.         for(let i=0;i<list.length;i++){
  35.             let item = list[i]
  36.             let formData = new FormData()
  37.             formData.append('filename', file.name)
  38.             formData.append('hash', item.hash)
  39.             formData.append('chunk', item.chunk)
  40.              
  41.             let task = axios({
  42.                 method: 'post',
  43.                 url: '/upload',
  44.                 data: formData
  45.             })
  46.  
  47.             task.then((data)=>{
  48.                 // 从并发池中移除已经完成的请求
  49.                 let index = pool.findIndex(t=> t===task)
  50.                 pool.splice(index)
  51.             }).catch(()=>{
  52.                 failList.push(item)
  53.             }).finally(()=>{
  54.                 finish++
  55.                 // 如果有失败的重新上传
  56.                 if(finish===list.length){
  57.                     uploadFileChunks(failList)
  58.                 }
  59.             })
  60.             pool.push(task)
  61.             if(pool.length === max){
  62.                 await Promise.race(pool)
  63.             }
  64.         }
  65.     }
  66.  
  67.     uploadFileChunks(fileChunks)
  68. }


服务端接口实现

  1. const express = require('express')
  2. const multiparty = require('multiparty')
  3. const fs = require('fs')
  4. const path = require('path')
  5. const { Buffer } = require('buffer')
  6. // file path
  7. const STATIC_FILES = path.join(__dirname, './static/files')
  8. // Temporary path to upload files
  9. const STATIC_TEMPORARY = path.join(__dirname, './static/temporary')
  10. const server = express()
  11. // Static file hosting
  12. server.use(express.static(path.join(__dirname, './dist')))
  13. // Interface for uploading slices
  14. server.post('/upload', (req, res) => {
  15.     const form = new multiparty.Form();
  16.     form.parse(req, function(err, fields, files) {
  17.         let filename = fields.filename[0]
  18.         let hash = fields.hash[0]
  19.         let chunk = files.chunk[0]
  20.         let dir = `${STATIC_TEMPORARY}/${filename}`
  21.         // console.log(filename, hash, chunk)
  22.         try {
  23.             if (!fs.existsSync(dir)) fs.mkdirSync(dir)
  24.             const buffer = fs.readFileSync(chunk.path)
  25.             const ws = fs.createWriteStream(`${dir}/${hash}`)
  26.             ws.write(buffer)
  27.             ws.close()
  28.             res.send(`${filename}-${hash} Section uploaded successfully`)
  29.         } catch (error) {
  30.             console.error(error)
  31.             res.status(500).send(`${filename}-${hash} Section uploading failed`)
  32.         }
  33.     })
  34. })
  35.  
  36. //Merged slice interface
  37. server.get('/merge', async (req, res) => {
  38.     const { filename } = req.query
  39.     try {
  40.         let len = 0
  41.         const bufferList = fs.readdirSync(`${STATIC_TEMPORARY}/${filename}`).map((hash,index) => {
  42.             const buffer = fs.readFileSync(`${STATIC_TEMPORARY}/${filename}/${index}`)
  43.             len += buffer.length
  44.             return buffer
  45.         });
  46.         //Merge files
  47.         const buffer = Buffer.concat(bufferList, len);
  48.         const ws = fs.createWriteStream(`${STATIC_FILES}/${filename}`)
  49.         ws.write(buffer);
  50.         ws.close();
  51.         res.send(`Section merge completed`);
  52.     } catch (error) {
  53.         console.error(error);
  54.     }
  55. })
  56.  
  57. server.listen(3000, _ => {
  58.     console.log('http://localhost:3000/')
  59. })


TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-12843.html
站长图库 - Node.js怎么实现分片上传？方法介绍
申明：本文转载于《segmentfault》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐