面试官：你如何实现大文件上传

本文正在参加「金石方案 . 分割6万现金大奖」

说到大文件上传，在脑海里最先想到的应该便是将图片保存在自己的服务器（如七牛云服务器），保存在数据库，不仅能够当做地址运用，还能够当做资源运用；或许将图片转换成base64，转换成buffer流，但是在javascript这门语言中不存在，但是这些只适用于一些小图片，关于大文件仍是束手无策。

一、问题分析

假如将大文件一次性上传，会发生什么？想必都遇到过在一个大文件上传、转发等操作时，由于要上传大量的数据，导致整个上传进程耗时绵长，更有甚者，上传失利，让你从头上传！这个时候，我现已咬牙切齿了。先不说上传时刻持久，毕竟上传大文件也没那么简单，要传输更多的报文，丢包也是常有的事，而且在这个时刻段万不能够做什么其他会中断上传的操作；其次，前后端交互必定是有时刻限制的，必定不答应无限制时刻上传，大文件又更简单超时而失利….

一、处理方案

既然大文件上传不适合一次性上传，那么将文件分片散上传是不是就能削减功能消耗了。

没错，便是分片上传。分片上传便是将大文件分成一个个小文件（切片），将切片进行上传，比及后端接纳到一切切片，再将切片兼并成大文件。经过将大文件拆分成多个小文件进行上传，的确便是处理了大文件上传的问题。由于恳求时能够并发执行的，这样的话每个恳求时刻就会缩短，假如某个恳求发送失利，也不需要全部从头发送。

二、具体完成

1、前端

（1）读取文件

预备HTML结构，包含：读取本地文件（input类型为file）、上传文件按钮、上传进展。

<input type="file" id="input">
<button id="upload">上传</button>
<!-- 上传进展 -->
<div style="width: 300px" id="progress"></div>

JS完成文件读取：

监听input的change事情，当选取了本地文件后，打印事情源可得到文件的一些信息：

let input = document.getElementById('input')
let upload = document.getElementById('upload')
let files = {}//创立一个文件目标
let chunkList = []//寄存切片的数组
​
// 读取文件
input.addEventListener('change', (e) => {
    files = e.target.files[0]
    console.log(files);
  //创立切片
  //上传切片
})

观察控制台，打印读取的文件信息如下：

（2）创立切片

文件的信息包含文件的姓名，文件的巨细，文件的类型等信息，接下来能够根据文件的巨细来进行切片，例如将文件依照1MB或许2MB等巨细进行切片操作：

// 创立切片
function createChunk(file, size = 2 * 1024 * 1024) {//两个形参：file是大文件，size是切片的巨细
    const chunkList = []
    let cur = 0
    while (cur < file.size) {
    chunkList.push({
        file: file.slice(cur, cur + size)//运用slice()进行切片
     })
    cur += size
    }
    return chunkList
}

切片的核心思维是：创立一个空的切片列表数组chunkList，将大文件依照每个切片2MB进行切片操作，这里运用的是数组的Array.prototype.slice()办法，那么每个切片都应该在2MB巨细左右，如上文件的巨细是8359021，那么可得到4个切片，分别是[0，2MB]、[2MB，4MB]、[4MB,6MB]、[6MB,8MB]。调用createChunk函数，会回来一个切片列表数组，实际上，有几个切片就相当于有几个恳求。

调用创立切片函数：

//留意调用方位，不是在全局，而是在读取文件的回调里调用
chunkList = createChunk(files)
console.log(chunkList);

观察控制台打印的结果：

（3）上传切片

上传切片的个关键的操作：

第一、数据处理。需要将切片的数据进行保护成一个包含该文件，文件名，切片名的目标，所以采用FormData目标来进行整理数据。FormData 目标用以将数据编译成键值对,可用于发送带键数据，经过调用它的append()办法来添加字段，FormData.append()办法会将字段类型为数字类型的转换成字符串（字段类型能够是 Blob、File或许字符串：假如它的字段类型不是 Blob 也不是 File，则会被转换成字符串类。

第二、并发恳求。每一个切片都分别作为一个恳求，只有当这4个切片都传输给后端了，即四个恳求都成功发起，才上传成功，运用Promise.all()确保一切的切片都现已传输给后端。

//数据处理
async function uploadFile(list) {
    const requestList = list.map(({file,fileName,index,chunkName}) => {
        const formData = new FormData() // 创立表单类型数据
        formData.append('file', file)//该文件
        formData.append('fileName', fileName)//文件名
        formData.append('chunkName', chunkName)//切片名
        return {formData,index}
    })
        .map(({formData,index}) =>axiosRequest({
            method: 'post',
            url: 'http://localhost:3000/upload',//恳求接口，要与后端一一一对应
            data: formData
        })
       .then(res => {
        console.log(res);
           //显示每个切片上传进展
           let p = document.createElement('p')
                p.innerHTML = `${list[index].chunkName}--${res.data.message}`
                document.getElementById('progress').appendChild(p)
       })
        )
        await Promise.all(requestList)//确保一切的切片都现已传输结束
}
​
//恳求函数
function axiosRequest({method = "post",url,data}) {
    return new Promise((resolve, reject) => {
        const config = {//设置恳求头
            headers: 'Content-Type:application/x-www-form-urlencoded',
        }
    //默许是post恳求，可更改
        axios[method](url,data,config).then((res) => {
            resolve(res)
        })
    })
}
​
// 文件上传
upload.addEventListener('click', () => {
    const uploadList = chunkList.map(({file}, index) => ({
        file,
        size: file.size,
        percent: 0,
        chunkName: `${files.name}-${index}`,
        fileName: files.name,
        index
    }))
    //发恳求，调用函数
    uploadFile(uploadList)
​
})

2、后端

（1）接纳切片

主要作业：

第一：需要引入multiparty中间件，来解析前端传来的FormData目标数据；

第二：经过path.resolve()在根目录创立一个文件夹–qiepian，该文件夹将寄存另一个文件夹（寄存一切的切片）和兼并后的文件；

第三：处理跨域问题。经过setHeader()办法设置一切的恳求头和一切的恳求源都答应；

第四：解析数据成功后，拿到文件相关信息，并且在qiepian文件夹创立一个新的文件夹${fileName}-chunks，用来寄存接纳到的一切切片；

第五：经过fse.move(filePath,fileName)将切片移入${fileName}-chunks文件夹，最终向前端回来上传成功的信息。

//app.js
const http = require('http')
const multiparty = require('multiparty')// 中间件，处理FormData目标的中间件
const path = require('path')
const fse = require('fs-extra')//文件处理模块
​
const server = http.createServer()
const UPLOAD_DIR = path.resolve(__dirname, '.', 'qiepian')// 读取根目录，创立一个文件夹qiepian寄存切片
​
server.on('request', async (req, res) => {
    // 处理跨域问题，答应一切的恳求头和恳求源
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Headers', '*')
​
    if (req.url === '/upload') { //前端访问的地址正确
        const multipart = new multiparty.Form() // 解析FormData目标
        multipart.parse(req, async (err, fields, files) => {
            if (err) { //解析失利
                return
            }
            console.log('fields=', fields);
            console.log('files=', files);
      
            const [file] = files.file
            const [fileName] = fields.fileName
            const [chunkName] = fields.chunkName
            const chunkDir = path.resolve(UPLOAD_DIR, `${fileName}-chunks`)//在qiepian文件夹创立一个新的文件夹，寄存接纳到的一切切片
            if (!fse.existsSync(chunkDir)) { //文件夹不存在，新建该文件夹
                await fse.mkdirs(chunkDir)
            }
​
            // 把切片移动进chunkDir
            await fse.move(file.path, `${chunkDir}/${chunkName}`)
            res.end(JSON.stringify({ //向前端输出
                code: 0,
                message: '切片上传成功'
            }))
        })
    }
})
​
server.listen(3000, () => {
    console.log('服务已发动');
})

经过node app.js发动后端服务，可在控制台打印fields和files：

（2）兼并切片

第一：前端得到后端回来的上传成功信息后，告诉后端兼并切片：

// 告诉后端去做切片兼并
function merge(size, fileName) {
    axiosRequest({
        method: 'post',
        url: 'http://localhost:3000/merge',//后端兼并恳求
        data: JSON.stringify({
            size,
            fileName
        }),
    })
}
​
//调用函数，当一切切片上传成功之后，告诉后端兼并
await Promise.all(requestList)
merge(files.size, files.name)

第二：后端接纳到兼并的数据，创立新的路由进行兼并，兼并的关键在于：前端经过POST恳求向后端传递的兼并数据是经过JSON.stringify()将数据转换成字符串，所以后端兼并之前，需要进行以下操作：

• 解析POST恳求传递的参数，自定义函数resolvePost，意图是将每个切片恳求传递的数据进行拼接，拼接后的数据仍然是字符串，然后经过JSON.parse()将字符串格式的数据转换为JSON目标；
• 接下来该去兼并了，拿到上个步骤解析成功后的数据进行解构，经过path.resolve获取每个切片所在的途径；
• 自定义兼并函数mergeFileChunk，只需传入切片途径，切片姓名和切片巨细，就真的将一切的切片进行兼并。在此之前需要将每个切片转换成流stream目标的形式进行兼并，自定义函数pipeStream，意图是将切片转换成流目标，在这个函数里边创立可读流，读取一切的切片，监听end事情，一切的切片读取结束后，毁掉其对应的途径，确保每个切片只被读取一次，不重复读取，最终将汇聚一切切片的可读流汇入可写流；
• 最终，切片被读取成流目标，可读流被汇入可写流，那么在指定的方位经过createWriteStream创立可写流，相同运用Promise.all()的办法，确保一切切片都被读取，最终调用兼并函数进行兼并。

if (req.url === '/merge') { // 该去兼并切片了
        const data = await resolvePost(req)
        const {
            fileName,
            size
        } = data
        const filePath = path.resolve(UPLOAD_DIR, fileName)//获取切片途径
        await mergeFileChunk(filePath, fileName, size)
        res.end(JSON.stringify({
            code: 0,
            message: '文件兼并成功'
        }))
}
​
// 兼并
async function mergeFileChunk(filePath, fileName, size) {
    const chunkDir = path.resolve(UPLOAD_DIR, `${fileName}-chunks`)
​
    let chunkPaths = await fse.readdir(chunkDir)
    chunkPaths.sort((a, b) => a.split('-')[1] - b.split('-')[1])
​
    const arr = chunkPaths.map((chunkPath, index) => {
        return pipeStream(
            path.resolve(chunkDir, chunkPath),
            // 在指定的方位创立可写流
            fse.createWriteStream(filePath, {
                start: index * size,
                end: (index + 1) * size
            })
        )
    })
    await Promise.all(arr)//确保一切的切片都被读取
}
​
// 将切片转换成流进行兼并
function pipeStream(path, writeStream) {
    return new Promise(resolve => {
        // 创立可读流，读取一切切片
        const readStream = fse.createReadStream(path)
        readStream.on('end', () => {
            fse.unlinkSync(path)// 读取结束后，删除现已读取过的切片途径
            resolve()
        })
        readStream.pipe(writeStream)//将可读流流入可写流
    })
}
​
// 解析POST恳求传递的参数
function resolvePost(req) {
    // 解析参数
    return new Promise(resolve => {
        let chunk = ''
        req.on('data', data => { //req接纳到了前端的数据
            chunk += data //将接纳到的一切参数进行拼接
        })
        req.on('end', () => {
            resolve(JSON.parse(chunk))//将字符串转为JSON目标
        })
    })
}

还未兼并前，文件夹如下图所示：

兼并后，文件夹新增了兼并后的文件：