大文件上传会消耗大量的时间，而且中途有可能上传失败。这时我们需要前端和后端配合来解决这个问题。
解决步骤：
文件分片，减少每次请求消耗的时间，如果某次请求失败可以单独上传，而不是从头开始
通知服务端合并文件分片
控制并发的请求数量，避免浏览器内存溢出
当因为网络或者其他原因导致某次的请求失败，我们重新发送请求
文件的分片与合并在javascript中，file对象是' 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>
并发控制如果文件很大，这样切分的分片会很多，浏览器短时间内就会发起大量的请求，可能会导致内存耗尽，所以要进行并发控制。
这里我们结合promise.race()方法 控制并发请求的数量，避免浏览器内存溢出。
// 加入并发控制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 pathconst static_files = path.join(__dirname, './static/files')// temporary path to upload filesconst static_temporary = path.join(__dirname, './static/temporary')const server = express()// static file hostingserver.use(express.static(path.join(__dirname, './dist')))// interface for uploading slicesserver.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 interfaceserver.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相关知识，请访问：nodejs 教程！
以上就是node.js怎么实现分片上传？方法介绍的详细内容。