JavaScript中文件流的處理場景及方法

更新時間：2023年09月24日 11:47:13 作者：JYeontu

作為一名前端開發(fā),我們平時也少不了對文件流數據進行處理,今天簡單整理一下日常開發(fā)中比較常見的一些處理文件流的場景及處理方法,希望可以幫助到大家

常見場景

一、input框上傳文件

帶有 type="file" 的 <input> 元素允許用戶可以從他們的設備中選擇一個或多個文件。選擇后，這些文件可以使用提交表單的方式上傳到服務器上，或者通過 Javascript 代碼和文件 API 對文件進行操作。

如下代碼：

<input type="file" id="fileInput" />
<script>
  const input = document.getElementById("fileInput");
  input.onchange = (e) => {
    const file = e.target.files[0];
    console.log(file);
  };
</script>

如上圖，通過inpu框選擇文件上傳之后，我們可以獲取到我們上傳的文件對象，那么我們應該怎樣將獲取到的文件對象更好的展示出來呢？

1、選擇圖片文件并在頁面上顯示

這種情況我們可以將獲取到的文件對象轉換為base64字符，再將其賦予img標簽的src屬性即可，這里我們需要使用到FileReader對象來進行讀取。

FileReader 對象允許 Web 應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區(qū)）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

其中 File 對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象，也可以來自拖放操作生成的 DataTransfer對象，還可以是來自在一個HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后返回結果。

詳細的介紹和更多的使用文檔都可以上MDN進行查看，這里我也就不過多贅述了。

想要獲取文件的base64 編碼，我們可以使用readAsDataURL 方法來讀?。?/p>

readAsDataURL 方法會讀取指定的 Blob 或 File 對象。讀取操作完成的時候，readyState 會變成已完成DONE，并觸發(fā) loadend 事件，同時 result 屬性將包含一個data:URL 格式的字符串（base64 編碼）以表示所讀取文件的內容。

具體代碼如下：

<input type="file" id="fileInput" />
<img alt="" id="uploadImg" src="" style="width: 100px; height: 100px" />
<div id="uploadText"></div>
<script>
  const input = document.getElementById("fileInput");
  input.onchange = (e) => {
    const file = e.target.files[0];
    const type = file.type.split("/")[0];
    console.log("type", type);
    switch (type) {
      case "image":
        dealImg(file);
        break;
  };
  function dealImg(file) {
    fileToBase64(file)
      .then((base64String) => {
        console.log("Base64:", base64String);
        const uploadImg = document.getElementById("uploadImg");
        uploadImg.setAttribute("src", base64String);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }
  function fileToBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = (error) => {
        reject(error);
      };
      reader.readAsDataURL(file);
    });
  }
</script>

2、選擇text文本文件并在頁面上顯示文件內容

首先我們先創(chuàng)建一個txt文件，并寫入一些內容：

想要獲取文件的文本內容，我們可以使用readAsText 方法來讀?。?/p>

readAsText 方法可以將 Blob 或者 File 對象轉根據特殊的編碼格式轉化為內容 (字符串形式)

具體代碼如下：

<input type="file" id="fileInput" />
<img alt="" id="uploadImg" src="" style="width: 100px; height: 100px" />
<div id="uploadText"></div>
<script>
  const input = document.getElementById("fileInput");
  input.onchange = (e) => {
    const file = e.target.files[0];
    const type = file.type.split("/")[0];
    console.log("type", type);
    switch (type) {
      case "text":
        dealText(file);
        break;
    }
  };
  function dealText(file) {
    readFile(file)
      .then((text) => {
        const uploadText = document.getElementById("uploadText");
        uploadText.innerHTML = text;
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }
  function readFile(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (event) => {
        resolve(event.target.result);
      };
      reader.onerror = (event) => {
        reject(error);
      };
      reader.readAsText(file); // 使用readAsText方法讀取文件內容
    });
  }
</script>

二、將img標簽圖片轉換為DataURL數據類型或Blob數據類型

1、將圖片轉換為 DataUR 數據類型

我們首先獲取到 img 標簽元素。然后創(chuàng)建一個 canvas 元素，并獲取其 2D 上下文。根據圖像的寬度和高度設置 canvas 的寬度和高度。接著使用 drawImage 方法將 img 元素中的圖像繪制到 canvas 上。最后，使用 toDataURL 方法即可將 canvas 中的內容轉換為 DataURL 數據類型，具體代碼如下：

  function imgToDataUrl() {
    const imgElement = document.getElementById("uploadImg"); // 獲取 img 標簽元素
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;
    // 在畫布上繪制圖片
    context.drawImage(imgElement, 0, 0);
    // 將畫布內容轉換為 DataURL
    const dataUrl = canvas.toDataURL("image/png");
    console.log(dataUrl); // 輸出 DataURL 數據
  }

2、將圖片轉換為 Blob 數據類型

前面canvas繪制圖片的步驟是一樣的，只是這里最后使用了canvas的toBlob方法來進行轉換，需要注意的是toBlob方法中的幾個參數：

toBlob(callback, type, quality)

callback

回調函數，可獲得一個單獨的 Blob 對象參數。如果圖像未被成功創(chuàng)建，可能會獲得 null 值。

type 可選

DOMString 類型，指定圖片格式，默認格式（未指定或不支持）為 image/png。

quality 可選

Number 類型，值在 0 與 1 之間，當請求圖片格式為 image/jpeg 或者 image/webp 時用來指定圖片展示質量。如果這個參數的值不在指定類型與范圍之內，則使用默認值，其余參數將被忽略。

function imgToBlob() {
    const imgElement = document.getElementById("uploadImg"); // 獲取 img 標簽元素
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;
    // 在畫布上繪制圖片
    context.drawImage(imgElement, 0, 0);
    // 將畫布內容轉換為 Blob
    canvas.toBlob(function (blob) {
      // 處理獲取到的 Blob 數據
      console.log(blob);
    }, "image/png");
  }

獲取到的Blob 數據如下：

三、圖片壓縮

我們可以使用JavaScrip對圖片進行質量壓縮來縮小圖片大小，具體使用到的方法是上面提到的toBlob(callback, type, quality)，我們可以通過其第三個參數來對質量進行壓縮。

  function doCompress() {
    imgToBlob((blob) => {
      console.log("原圖片", blob);
      compressImage(blob, Infinity, Infinity, 0.9).then((res) => {
        console.log("壓縮質量為0.9得到圖片", res);
      });
    });
  }
  function compressImage(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (event) {
        const img = new Image();
        img.src = event.target.result;
        img.onload = function () {
          let width = img.width;
          let height = img.height;
          if (width > maxWidth || height > maxHeight) {
            const ratio = Math.max(width / maxWidth, height / maxHeight);
            width /= ratio;
            height /= ratio;
          }
          const canvas = document.createElement("canvas");
          canvas.width = width;
          canvas.height = height;
          const ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, width, height);
          canvas.toBlob(
            function (blob) {
              resolve(blob);
            },
            "image/jpeg",
            quality
          );
        };
      };
      reader.onerror = function (error) {
        reject(error);
      };
    });
  }
  function imgToBlob(cb) {
    const imgElement = document.getElementById("uploadImg"); // 獲取 img 標簽元素
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;
    // 在畫布上繪制圖片
    context.drawImage(imgElement, 0, 0);
    // 將畫布內容轉換為 Blob
    canvas.toBlob(function (blob) {
      // 處理獲取到的 Blob 數據
      cb(blob);
    }, "image/png");
  }

上面代碼定義了一個名為compressImage的函數，它接受四個參數：file（要壓縮的文件），maxWidth（最大寬度），maxHeight（最大高度）和quality（圖像質量，范圍從0到1）。

在函數內部，我們首先使用FileReader讀取文件，并將其轉換為Data URL。然后，我們創(chuàng)建一個Image對象并將Data URL賦給它。在圖像加載完成后，我們根據指定的最大寬度和高度來調整圖像大小。

接下來，我們使用<canvas>元素創(chuàng)建一個畫布，并設置其寬度和高度。然后，我們在畫布上通過drawImage方法繪制圖像，將其縮放到適當的大小。

最后，我們使用toBlob方法將畫布內容轉換為Blob對象，并將其以指定的JPEG格式和質量解析。最終返回壓縮后的Blob對象。

具體效果如下：