JS中的File（四）：文件流Streams API使用详解

一、流的原理

二、流的分类

1、可读流（ReadableStream）

3、转换流（TransformStream）

三、流中的Request和Response对象

四、综合应用

PS：涉及到一些基本的文件操作和格式内容知识，可以进入我的主页参考我之前的此系列文章。这个系列我还会继续更新下去的~

参考：

从 Fetch 到 Streams —— 以流的角度处理网络请求 - 掘金 (juejin.cn)

Stream API - Web API 接口参考 | MDN (mozilla.org)

一、流的原理

在流之前，如果想要对文件资源进行操作，需要先下载完整的文件，等待它反序列化成合适的格式，在完整地对接收到的内容进行统一处理。流出现之后，网络发送文件可以将文件以一块块的数据形式传输，这使得——视频缓冲区和逐渐加载播放其他类型的资源成为可能。

*在阅读的时候，总会遇到一个词组叫做"Underlying Sink"，我们翻译为"底层接收器"或者"底层汇聚器"，指的是用于接收流写入数据的底层组件或实体，表达的是底层数据传输的目标或者终点。

流的优点：

在javascript中对流可以进行按块、按位处理，不再需要缓冲区、字符串或者blob；
你可以检测流何时开始或结束，将流链接在一起，根据需要处理错误和取消流，并对流的读取速度做出反应。
流的处理实现了异步，很多方法基于Promise，所以注意时序顺序

由于网络请求方法Fetch API，它区别于原始的XHR不仅仅在是基于Promise处理网络请求任务（XHR是基于事件驱动的callback），更是在于它是基于数据流来实现的。所以下文在描述流的操作时，不可避免要和fetch结合。另外，fetch API基于Request对象实现的，因此下文中提及的Request对象的基于流的使用和fetch API同理

二、流的分类

1、可读流（ReadableStream）

表示数据的可读流。在使用Fetch进行网络请求处理时，请求对象中的body属性Request.body 和响应对象Response.body 属性中可以获取到可读流的主体，这是将主体内容暴露作为一个可读流的 getter。

或者开发者可以自定义流（使用ReadableStream()进行构造，定义一些钩子比如start、cancel、pull等，参数的传入是controller控制器实例，同下文中提及的构造器参数）

举个应用栗子

// Fetch the original image
fetch("./tortoise.png")// Retrieve its body as ReadableStream.then((response) => response.body).then((body) => {const reader = body.getReader();// 使用 read读取，并获取状态和valueconst { done, value } = await reader.read();if (done) {console.log('End of file reached');// 释放读取器reader.releaseLock();} else {// 处理读取到的数据块console.log('Read:', value);// 继续递归读取下一个数据块// 可以递归读取 }});

ReadableStream中除了getReader()获取对可读流的读取器，还有一些常用方法：

ReadableStream.tee()：拷贝流，实现的是返回一个数组，包含对原始可读流的两个相同的副本可读流，然后可以独立的使用不同的 reader 读取
链式管道传输ReadableStream.pipeThrough()和ReadableStream.pipeTo()：实现的是从一个流输出到另一个。前者pipeThrough是将可读流管道输出至拥有一对writer/reader 的流中比如下文介绍的TransformStream，并将一种数据转换成另一种类型的流（比如输入WritableStream->TransformStream->返回输出ReadableStream）；后者pipeTo是可读流管道传输至作为链式管道传输终点的 writer（转换为readableStream->writableStream）

2、可写流（WritableStream）

为将流写入目的地（称为接收器）的过程，提供了一个标准抽象。内置了背压和队列机制。

*解释下背压和队列机制：

背压（Backpressure）：
- 背压是指在数据写入速度大于消费者（读取端）的处理速度时，为了防止数据溢出，写入端必须采取一些措施以减缓写入速度的现象。
- 在可写流（WritableStream）中，当写入速度过快而消费者无法跟上时，可写流会发出背压信号，告诉写入端要减缓写入。这可以通过 writer.write() 返回的 Promise 来实现，当 Promise 处于挂起状态时，表示发生了背压。
队列机制：
- 队列机制是一种用于缓存待写入数据的机制，以确保写入端和消费者之间的速度匹配。
- 在 WritableStream 中，有一个内部的队列用于存储待写入的数据块。写入端通过 writer.write(chunk) 将数据块推送到队列中。如果队列已满或发生背压，writer.write(chunk) 返回一个处于挂起状态的 Promise。
- 当队列中的数据被消费者处理时，队列中的下一个数据块会被写入。

定义构造WritableStream有两个对象参数：第一个必选，用于配置一些写入流时的钩子；第二个可选，用于配置一些chunk入队和队列控制的策略（利用ByteLengthQueuingStrategy【按字节计量】和CountQueuingStrategy【按元素数量计量】接口去定义策略）。

在必选中，所有的对象字段都是可选的，如下：

start(controller)：在WritableStream对象完成构造后立即调用controller method执行一次
write(chunk,controller)：每当一个新的chunk准备写入接收器的时候，将调用方法
close(controller)：当结束写入流时候调用该方法
abort(reason)：当写入流被中断或者写入流进入错误状态的时候，调用该方法

构造完的WritableStream可以用getWriter()方法获取其写入器

举个应用栗子

const decoder = new TextDecoder("utf-8");
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
let result = "";
const writableStream = new WritableStream({// Implement the sinkwrite(chunk) {return new Promise((resolve, reject) => {const buffer = new ArrayBuffer(1);const view = new Uint8Array(buffer);view[0] = chunk;const decoded = decoder.decode(view, { stream: true });const listItem = document.createElement("li");listItem.textContent = `Chunk decoded: ${decoded}`;list.appendChild(listItem);result += decoded;resolve();});},close() {const listItem = document.createElement("li");listItem.textContent = `[MESSAGE RECEIVED] ${result}`;list.appendChild(listItem);},abort(err) {console.error("Sink error:", err);},},queuingStrategy,
);

3、转换流（TransformStream）

代表一个即可写入又可读取的流，在读写之间起着中间流转换的作用。因此转换流比较简单，无实例方法，可自定义构造，只有两个只读的属性ReadableStream与 WritableStream，这两个都暴露的都是自身的可读流和可写流。通常，借助这两个属性来做中间转换！

举个应用栗子

实现输入的所有字符串都转为大写字母

class UpperCaseTransformer {constructor() {this.transformStream = new TransformStream({start(controller) {//开始钩子//----下面是给个示例！// 将会在对象创建时立刻执行，并传入一个流控制器controller.desiredSize// 填满队列所需字节数controller.enqueue(chunk)// 向可读取的一端传入数据片段controller.error(reason)// 同时向可读取与可写入的两侧触发一个错误controller.terminate()// 关闭可读取的一侧，同时向可写入的一侧触发错误},async transform(chunk, controller) {//中间chunck转换// 将 chunk 转换为大写const upperCaseChunk = chunk.toString().toUpperCase();// 块入队，将转换后的数据传递给下游controller.enqueue(upperCaseChunk);},flush(controller) {// 当可写入的一端得到的所有的片段完全传入 transform() 方法处理后，在可写入的一端即将关    闭时调用}},queuingStrategy); //queuingStrategy策略内容假设为 { highWaterMark: 1 }//获取自身的读写流主提this.readableStream = this.transformStream.readable;this.writableStream = this.transformStream.writable;}// 关闭流async close() {await this.writableStream.getWriter().close();}// 获取读取器getReader() {return this.readableStream.getReader();}// 获取写入器getWriter() {return this.writableStream.getWriter();}
}

三、流中的Request和Response对象

这两个对象的很多属性依然和普通网络请求一样，可以直接通过对象获取，比如headers、request中的url和credentials等、response中的status等。

但是，在fetch和Request对象下，这两个对象的body属性返回的ReadableStream！

那么要如何转换成文件的其他资源格式和对象呢？request和response都有着相同的实例方法如下，只不过request是调用这些方法作为请求体body的内容格式，response是将响应体的body解析为对应格式：

arrayBuffer() // 返回一个Promise，兑现为ArrayBuffer
blob() // 返回一个Promise，兑现为blob
formData() //如上
text() //如上，返回字符串clone()//将request或者response拷贝

直接单独说的是json()方法，request和response都有着相同的实例方法，可以将body内容兑现为json

但是response中还有一个静态方法json，可以在后端处理的时候，将输入的data直接以json格式塞入body而不是默认的readableStream；options配置status状态码、statusText状态信息、headers等，返回的是一个以json内容为body 的response对象

Response.json(data, options)

举个应用栗子

fetch读取图像【涉及到如何从stream转为blob】

const image = document.getElementById("target");// 请求原始图片
fetch("./tortoise.png")// 取出 body.then((response) => response.body).then((body) => {const reader = body.getReader();return new ReadableStream({start(controller) {return pump();function pump() {return reader.read().then(({ done, value }) => {// 读不到更多数据就关闭流if (done) {controller.close();return;}// 将下一个数据块置入流中controller.enqueue(value);return pump();});}},});}).then((stream) => new Response(stream)).then((response) => response.blob()).then((blob) => URL.createObjectURL(blob)).then((url) => console.log((image.src = url))).catch((err) => console.error(err));

四、综合应用

将彩色图片转成由灰度级别信息（grayscale）表示的黑白图，达成以下效果

github链接：dom-examples/streams/grayscale-png at main · mdn/dom-examples (github.com)

这里仅粘贴与流操作有关的核心代码，其中转换代码在png-lib.js里面，流读取在index.html中，有兴趣的去github看，里面还有不少其他例子~

transform：

class GrayscalePNGTransformer {constructor() {this._mode = 'magic';}/*** Called for every downloaded PNG data chunk to be grayscaled.** @param {Uint8Array} chunk The downloaded chunk.* @param {TransformStreamDefaultController} controller The controller to euqueue grayscaled data.*/transform(chunk, controller) {let position = chunk.byteOffset;let length = chunk.byteLength;const source = new DataView(chunk.buffer, position, length);const buffer = new Uint8Array(length);const target = new DataView(buffer.buffer, position, length);while (position < length) {switch (this._mode) {case 'magic': {const magic1 = source.getUint32(position);target.setUint32(position, magic1);position += 4;const magic2 = source.getUint32(position);target.setUint32(position, magic2);position += 4;const magic = magic1.toString(16) + '0' + magic2.toString(16);console.log('%cPNG magic:     %c %o', 'font-weight: bold', '', magic);if (magic !== '89504e470d0a1a0a') {throw new TypeError('This is not a PNG');}this._mode = 'header';break;}case 'header': {// Read chunk infoconst chunkLength = source.getUint32(position);target.setUint32(position, chunkLength);position += 4;const chunkName = this.readString(source, position, 4);this.writeString(target, position, chunkName);position += 4;if (chunkName !== 'IHDR') {throw new TypeError('PNG is missing IHDR chunk');}// Read image dimensionsthis._width = source.getUint32(position);target.setUint32(position, this._width);position += 4;this._height = source.getUint32(position);target.setUint32(position, this._height);position += 4;console.log('%cPNG dimensions:%c %d x %d', 'font-weight: bold', '', this._width, this._height);this._bitDepth = source.getUint8(position);target.setUint8(position, this._bitDepth);position += 1;console.log('%cPNG bit depth: %c %d', 'font-weight: bold', '', this._bitDepth);this._colorType = source.getUint8(position);target.setUint8(position, this._colorType);position += 1;console.log('%cPNG color type:%c %s', 'font-weight: bold', '', this.colorType(this._colorType));const compression = source.getUint8(position);target.setUint8(position, compression);position += 1;console.log('%cPNG compressio:%c %d', 'font-weight: bold', '', compression);const filter = source.getUint8(position);target.setUint8(position, filter);position += 1;console.log('%cPNG filter:    %c %d', 'font-weight: bold', '', filter);const interlace = source.getUint8(position);target.setUint8(position, interlace);position += 1;console.log('%cPNG interlace: %c %d', 'font-weight: bold', '', interlace);const chunkCrc = source.getUint32(position);target.setUint32(position, chunkCrc);position += 4;this._mode = 'data';break;}case 'data': {// Read chunk infoconst dataSize = source.getUint32(position);console.log('%cPNG data size: %c %d', 'font-weight: bold', '', dataSize);const chunkName = this.readString(source, position + 4, 4);if (chunkName !== 'IDAT') {throw new TypeError('PNG is missing IDAT chunk');}const crcStart = position + 4;// Extract the data from the PNG streamconst bytesPerCol = this.bytesPerPixel();const bytesPerRow = this._width * bytesPerCol + 1;let result = chunk.subarray(position + 8, position + 8 + dataSize);// Decompress the dataresult = pako.inflate(result);// Remove PNG filters from each scanlineresult = this.removeFilters(result, bytesPerCol, bytesPerRow);// Actually grayscale the imageresult = this.grayscale(result, bytesPerCol, bytesPerRow);// Compress with Deflateresult = pako.deflate(result);// Write data to targettarget.setUint32(position, result.byteLength);this.writeString(target, position + 4, 'IDAT');buffer.set(result, position + 8);position += result.byteLength + 8;const chunkCrc = crc32(chunkName, result);target.setUint32(position, chunkCrc);position += 4;this._mode = 'end';break;}case 'end': {// Write IEND chunktarget.setUint32(position, 0);position += 4;this.writeString(target, position, 'IEND');position += 4;target.setUint32(position, 2923585666);position += 4;controller.enqueue(buffer.subarray(0, position));return;}}}}/*** @param {DataView} dataView* @param {number} position* @param {number} length*/readString(dataView, position, length) {return new Array(length).fill(0).map((e, index) => String.fromCharCode(dataView.getUint8(position + index))).join('');}/*** @param {DataView} dataView* @param {number} position* @param {string} string*/writeString(dataView, position, string) {string.split('').forEach((char, index) => dataView.setUint8(position + index, char.charCodeAt(0)));}//..........未完}

流读取和转换：

<script type="application/javascript">const image = document.getElementById('target');// Fetch the original imagefetch('tortoise.png')// Retrieve its body as ReadableStream.then(response => response.body)// Create a gray-scaled PNG stream out of the original.then(rs => rs.pipeThrough(new TransformStream(new GrayscalePNGTransformer())))// Create a new response out of the stream.then(rs => new Response(rs))// Create an object URL for the response.then(response => response.blob()).then(blob => URL.createObjectURL(blob))// Update image.then(url => image.src = url).catch(console.error);</script>