笔记&收藏&学习

本文由简悦 SimpRead 转码，原文地址 mp.weixin.qq.com

文件上传、文件下载都是常见的需求。

大文件上传我们会通过分片上传来优化。

比如阿里云 OSS 的大文件分片上传：

那大文件下载如何优化呢？

答案也是分片下载，或者叫流式传输。

我们试一下：

nest new download-test

创建个 Nest 项目。

在 AppController 里添加个 download 的路由：

import { Controller, Get, Res } from '@nestjs/common';import { AppService } from './app.service';import { Response } from 'express';import * as fs from 'fs';@Controller()export class AppController {  constructor(private readonly appService: AppService) {}  @Get()  getHello(): string {    return this.appService.getHello();  }  @Get('download')  download(@Res() res: Response) {    const content = fs.readFileSync('package.json');    res.set('Content-Disposition', `attachment; file`);    res.end(content);  }}

把服务跑起来：

npm run start:dev

浏览器访问下：

可以看到，触发了下载。

在 devtools 里可以看到正确设置了 header：

header 通过 @Header 装饰器加也可以：

@Get('download')@Header('Content-Disposition', `attachment; file`)download(@Res() res: Response) {    const content = fs.readFileSync('package.json');    res.end(content);}

效果一样。

但是，这样文件是全部读取出来返回，如果文件大了，比如好几个 G，会占用很大的内存。

当大文件下载的时候，能不能读出一部分返回一部分，也就是流式的下载呢？

可以的，http 有这个功能。

就是 transfer-encoding:chunked

这个是面试常考题。

从服务器下载一个文件的时候，如何知道文件下载完了呢？

有两种方式：

一种是 header 里带上 Content-Length，浏览器下载到这个长度就结束。

另一种是设置 transfer-encoding:chunked，它是不固定长度的，服务器不断返回内容，直到返回一个空的内容代表结束。

比如这样：

Hello
,
World
!

这里分了 “Hello” “,” “World”“!” 这 4 个块，长度分别为 5、1、5、1

最后以一个长度为 0 的块代表传输结束。

这样，不管内容多少都可以分块返回，就不用指定 Content-Length 了。

这就是大文件的流式传输的原理，就是 transfer-encoding:chunked。

然后我们在代码里实现下：

@Get('download2')@Header('Content-Disposition', `attachment; file`)download2(@Res() res: Response) {    const stream = fs.createReadStream('package.json');    stream.pipe(res);}

node 的 stream 本来就是分块读取内容的，这里配合流式返回数据很合适。

现在就不再返回 Content-Length 了，而是返回了 Transfer-Encoding:chunked：

这就是流式传输。

不过在 nest 里最好不要直接用 node 的 stream api。

因为它有很多事件，比如 data、error、end 等，自己处理还是挺麻烦的。

可以直接用 Nest 封装的一个类 StreamableFile：

@Get('download3')download3() {    const stream = fs.createReadStream('package.json');    return new StreamableFile(stream, {      disposition: `attachment; file`    });}

试一下：

效果一样。

只是这里的 Content-Type 默认是 application/octet-stream 二进制流：

你也可以改一下：

@Get('download3')download3() {    const stream = fs.createReadStream('package.json');    return new StreamableFile(stream, {      type: 'text/plain',      disposition: `attachment; file`    });}