javascript基础学习系列四百九十三：FileReader类型

async function* chars() {
// ☺的UTF-8编码是0xF0 0x9F 0x98 0x8A(即十进制240、159、152、138)
const encodedText = [240, 159, 152, 138].map((x) => Uint8Array.of(x));
});
const decodedTextStream = encodedTextStream.pipeThrough(new TextDecoderStream()); 24 const readableStreamDefaultReader = decodedTextStream.getReader();
   for (let char of encodedText) {
yield await new Promise((resolve) => setTimeout(resolve, 1000, char)); 21
} }
const encodedTextStream = new ReadableStream({
  async start(controller) {
    for await (let chunk of chars()) {
      controller.enqueue(chunk);
}
    controller.close();
  }
   (async function() {
  while(true) {
    const { done, value } = await readableStreamDefaultReader.read();
    if (done) {
      break;
    } else {
      console.log(value);
} }
  })();
// ☺

文本解码器流经常与 fetch()一起使用，因为响应体可以作为 ReadableStream 来处理。比如:

 const response = await fetch(url);
const stream = response.body.pipeThrough(new TextDecoderStream()); const decodedStream = stream.getReader()
    for await (let decodedChunk of decodedStream) {
      console.log(decodedChunk);
}

File API 与 Blob API

Web 应用程序的一个主要的痛点是无法操作用户计算机上的文件。2000 年之前，处理文件的唯一方 式是把放到一个表单里，仅此而已。File API 与 Blob API 是为了让 Web 开发者 能以安全的方式访问客户端机器上的文件，从而更好地与这些文件交互而设计的。

File类型

File API 仍然以表单中的文件输入字段为基础，但是增加了直接访问文件信息的能力。HTML5 在 DOM 上为文件输入元素添加了 files 集合。当用户在文件字段中选择一个或多个文件时，这个 files 集合中会包含一组 File 对象，表示被选中的文件。每个 File 对象都有一些只读属性。
 name:本地系统中的文件名。
 size:以字节计的文件大小。
 type:包含文件 MIME 类型的字符串。
 lastModifiedDate:表示文件最后修改时间的字符串。这个属性只有 Chome 实现了。 例如，通过监听 change 事件然后遍历 files 集合可以取得每个选中文件的信息:

   let filesList = document.getElementById("files-list");
    filesList.addEventListener("change", (event) => {
      let files = event.target.files,
          i = 0,
          len = files.length;
      while (i < len) {
        const f = files[i];
        console.log(`${f.name} (${f.type}, ${f.size} bytes)`);
        i++;
} });

这个例子简单地在控制台输出了每个文件的信息。仅就这个能力而言，已经可以说是 Web 应用向 前迈进的一大步了。不过，File API 还提供了 FileReader 类型，让我们可以实际从文件中读取数据。

FileReader类型

FileReader 类型表示一种异步文件读取机制。可以把 FileReader 想象成类似于 XMLHttpRequest， 只不过是用于从文件系统读取文件，而不是从服务器读取数据。FileReader 类型提供了几个读取文件 数据的方法。
 readAsText(file, encoding):从文件中读取纯文本内容并保存在 result 属性中。第二个 参数表示编码，是可选的。
 readAsDataURL(file):读取文件并将内容的数据 URI 保存在 result 属性中。
 readAsBinaryString(file):读取文件并将每个字符的二进制数据保存在 result 属性中。  readAsArrayBuffer(file):读取文件并将文件内容以 ArrayBuffer 形式保存在 result 属性。 这些读取数据的方法为处理文件数据提供了极大的灵活性。例如，为了向用户显示图片，可以将图
片读取为数据 URI，而为了解析文件内容，可以将文件读取为文本。 因为这些读取方法是异步的，所以每个 FileReader 会发布几个事件，其中 3 个最有用的事件是
属性，即使其中尚未包含全部数据。 18 error 事件会在由于某种原因无法读取文件时触发。触发 error 事件时，FileReader 的 error
属性会包含错误信息。这个属性是一个对象，只包含一个属性:code。这个错误码的值可能是 1(未找 到文件)、2(安全错误)、3(读取被中断)、4(文件不可读)或 5(编码错误)。
load 事件会在文件成功加载后触发。如果 error 事件被触发，则不会再触发 load 事件。下面的 例子演示了所有这 3 个事件:
progress、error 和 load，分别表示还有更多数据、发生了错误和读取完成。
progress 事件每 50 毫秒就会触发一次，其与 XHR 的 progress 事件具有相同的信息: lengthComputable、loaded和total。此外，在progress事件中可以读取FileReader的result

 let filesList = document.getElementById("files-list");
filesList.addEventListener("change", (event) => {
let info = "",
output = document.getElementById("output"),
progress = document.getElementById("progress"), 21 files = event.target.files,
type = "default",
reader = new FileReader();
 if (/image/.test(files[0].type)) {
  reader.readAsDataURL(files[0]);
  type = "image";
} else {
  reader.readAsText(files[0]);
  type = "text";
}
reader.onerror = function() {
  output.innerHTML = "Could not read file, error code is " +
      reader.error.code;
};
reader.onprogress = function(event) {
  if (event.lengthComputable) {
    progress.innerHTML = `${event.loaded}/${event.total}`;
  }
};
reader.onload = function() {
  let html = "";
  switch(type) {
    case "image":
      html = `<img src="${reader.result}">`;
           case "text":
            html = reader.result;
            break;
}
        output.innerHTML = html;
      };
});

以上代码从表单字段中读取一个文件，并将其内容显示在了网页上。如果文件的 MIME 类型表示它 是一个图片，那么就将其读取后保存为数据 URI，在 load 事件触发时将数据 URI 作为图片插入页面中。 如果文件不是图片，则读取后将其保存为文本并原样输出到网页上。progress 事件用于跟踪和显示读 取文件的进度，而 error 事件用于监控错误。
如果想提前结束文件读取，则可以在过程中调用 abort()方法，从而触发 abort 事件。在 load、 error 和 abort 事件触发后，还会触发 loadend 事件。loadend 事件表示在上述 3 种情况下，所有读 取操作都已经结束。readAsText()和 readAsDataURL()方法已经得到了所有主流浏览器支持。