Document

# 概述 - 属于[专栏-项目难点](https://juejin.cn/column/7044426014323605541) - 重要程度:★★★★★ # 背景当我们在做文件的导入功能的时候,如果导入的文件过大,可能会导所需要的时间够长,且失败后需要重新上传,我们需要前后端结合的方式解决这个问题 # 思路我们需要做几件事情如下: - **对文件做切片**,即将一个请求拆分成多个请求，每个请求的时间就会缩短，且如果某个请求失败，只需要重新发送这一次请求即可，无需从头开始 - **通知服务器合并切片**,在上传完切片后,前端通知服务器做合并切片操作 - **控制多个请求的并发量**,防止多个请求同时发送,造成浏览器内存溢出,导致页面卡死 - **做断点续传**,当多个请求中有请求发送失败,例如出现网络故障、页面关闭等,我们得对失败的请求做处理,让它们重复发送 # 实现 ## 前端 ### 示例代码仓库 [仓库地址](https://gitee.com/huangjinlin2022/resolve_upload_large_file) ### 步骤1-切片,合并切片在`JavaScript中`，文件`FIle`对象是`Blob`对象的子类，`Blob`对象包含一个重要的方法`slice`通过这个方法，我们就可以对二进制文件进行拆分,具体代码如下: ```html Document ``` ### 步骤2-并发控制结合`Promise.race`和`异步函数`实现,多个请求同时并发的数量,防止浏览器内存溢出,具体代码如下: ```html Document ``` ### 步骤3-断点续传在单个请求失败后,触发`catch`的方法的时候,讲当前请求放到失败列表中,在本轮请求完成后,重复对失败请求做处理,具体代码如下: ```html Document ``` ## 后端 ### 步骤1.安装依赖 ```sh npm i express@4.17.2 npm i multiparty@4.2.2 ``` ### 步骤2.接口实现 ```javascript const express = require('express') const multiparty = require('multiparty') const fs = require('fs') const path = require('path') const { Buffer } = require('buffer') // 上传文件最终路径 const STATIC_FILES = path.join(__dirname, './static/files') // 上传文件临时路径 const STATIC_TEMPORARY = path.join(__dirname, './static/temporary') const server = express() // 静态文件托管 server.use(express.static(path.join(__dirname, './dist'))) // 切片上传的接口 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} 切片上传成功`) } catch (error) { console.error(error) res.status(500).send(`${filename}-${hash} 切片上传失败`) } }) }) //合并切片接口 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 }); //合并文件 const buffer = Buffer.concat(bufferList, len); const ws = fs.createWriteStream(`${STATIC_FILES}/${filename}`) ws.write(buffer); ws.close(); res.send(`切片合并完成`); } catch (error) { console.error(error); } }) server.listen(3000, _ => { console.log('http://localhost:3000/') }) ``` # 其他实现如果使用`腾讯云`或`阿里云`文件上传的服务,它们提供了`npm`库,例如`腾讯云`的[cos-js-sdk-v5](https://www.npmjs.com/package/cos-js-sdk-v5),它自身提供的切片相关的配置