文件

文件处理

Blob

我们也可以使用FileReader读取blob数据，并打印出来：

const ab = new ArrayBuffer(32);
const iA = new Int8Array(ab);
iA[0] = 97;
const blob = new Blob([iA], { type: "application/octet-binary" });
const fr = new FileReader();
fr.addEventListener("load", function (ev) {
  console.log(ev.target.result); //会输出字符：a
});
fr.readAsText(blob);

如果要把blob文件转化为二进制的数据的话，要先把blob转化为arraybuffer，然后再使用typedArray就可以直接编辑二进制数据了：

const ab = new ArrayBuffer(32);
const iA = new Int8Array(ab);
iA[0] = 97;
const blob = new Blob([iA], { type: "application/octet-binary" });
const fr = new FileReader();
fr.addEventListener("load", function (ev) {
  const abb = ev.target.result;
  const iAA = new Int8Array(abb);
  console.log(iAA);
});
//把blob文件转化为arraybuffer；
fr.readAsArrayBuffer(blob);

arraybuffer -->> typedarray -->> blob -->> blob 通过FileReader转化为arraybuffer或者text文本或者base64字符串；arraybuffer和typedarray主要是处理二进制，如果要把blob往二进制转换，必须先把blob转换为arraybuffer，然后再转换为可以编辑的typedArray；实际上，还有一种比较常用的数据类型，base64编码的数据，常用的比如image的base64的编码，文本的base64编码等，也可以把base64的编码转化为对应的ascll码，再转化为typearray，然后再生成blob对象：

function dataURLtoBlob(dataurl) {
  const arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  //通过atob把base64转化为ascll码，然后再把ascll码转化为字节码
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  //u8arr就是2进制的数据
  return new Blob([u8arr], { type: mime });
}

FileReader

通过FileReader，我们能够方便地在ArrayBuffer与Blob之间转化：

// ArrayBuffer -> Blob
const uint8Array = new Uint8Array([1, 2, 3]);
const arrayBuffer = uint8Array.buffer;
const blob = new Blob([arrayBuffer]);

// Blob -> ArrayBuffer
const uint8ArrayNew = null;
const arrayBufferNew = null;
const fileReader = new FileReader();
fileReader.onload = function (event) {
  arrayBufferNew = event.target.result;
  uint8ArrayNew = new Uint8Array(arrayBufferNew);

  // warn if read values are not the same as the original values
  // arrayEqual from: http://stackoverflow.com/questions/3115982/how-to-check-javascript-array-equals
  function arrayEqual(a, b) {
    return !(a < b || b < a);
  }
  if (arrayBufferNew.byteLength !== arrayBuffer.byteLength)
    // should be 3
    console.warn("ArrayBuffer byteLength does not match");
  if (arrayEqual(uint8ArrayNew, uint8Array) !== true)
    // should be [1,2,3]
    console.warn("Uint8Array does not match");
};
fileReader.readAsArrayBuffer(blob);
fileReader.result; // also accessible this way once the blob has been read

最近更新于0001-01-01