如何將文件轉換為base64編碼？

在開發中，我們常常需要將圖片、音頻、視頻等文件編碼成base64的字符串格式以便於傳輸和處理。本文將從多個方面詳細闡述如何將文件轉換為base64編碼，並提供完整的代碼示例。

一、使用 FileReader API + btoa() 方法

FileReader API提供了一種異步讀取本地文件的方法，而btoa()方法可以將二進制數據轉換為base64編碼的字符串。以下是代碼示例：

    const fileInput = document.querySelector('input[type="file"]');
    const reader = new FileReader();
    reader.readAsBinaryString(fileInput.files[0]);
    reader.onload = function() {
        const base64Str = btoa(reader.result);
        console.log(base64Str);
    };

以上代碼先獲取文件輸入框的值，然後使用FileReader API讀取文件內容並將其轉換為二進制字符串。最後使用btoa()方法將二進制字符串轉換為base64字符串，並打印輸出到控制台。

二、使用 fetch() + arrayBuffer() + btoa() 方法

fetch()方法提供了一種簡單地獲取網絡資源的方法，同時可以與arrayBuffer()方法結合使用獲取文件的二進制數據，最後再使用btoa()方法將其轉換為base64編碼的字符串。以下是代碼示例：

    const imgUrl = 'http://example.com/image.jpg';
    fetch(imgUrl)
        .then(response => response.arrayBuffer())
        .then(buffer => {
            const base64Str = btoa(new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), ''));
            console.log(base64Str);
        });

以上代碼將遠程圖片的URL地址作為參數傳入fetch()方法，然後使用arrayBuffer()方法獲取文件的二進制數據。最後使用Uint8Array對象創建一個新的數組對象，並將文件二進制數據轉換為字符串，最終使用btoa()方法將字符串編碼成base64字符串，並打印輸出到控制台。

三、使用 FileReaderSync API + readAsDataURL() 方法

FileReaderSync API提供了一種同步讀取文件的方法，可以方便地獲取文件內容，並使用readAsDataURL()方法將其轉換為base64編碼的DataURL格式字符串。以下是代碼示例：

    const fileInput = document.querySelector('input[type="file"]');
    const reader = new FileReaderSync();
    const base64Str = reader.readAsDataURL(fileInput.files[0]);
    console.log(base64Str);

以上代碼使用同步方式讀取文件內容，並使用readAsDataURL()方法將其轉換為DataURL格式的base64編碼字符串，並打印輸出到控制台。

四、使用 Canvas API + toDataURL() 方法

Canvas API提供了一種將圖片轉換為base64編碼字符串的方式，使用toDataURL()方法即可獲取轉換後的結果。以下是代碼示例：

    const img = new Image();
    img.src = 'http://example.com/image.jpg';
    img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        const base64Str = canvas.toDataURL('image/jpeg');
        console.log(base64Str);
    };

以上代碼將遠程圖像路徑賦值給圖片對象，然後在圖片加載完成後繪製到畫布上，並使用toDataURL()方法將畫布內容轉換為base64編碼的字符串，並打印輸出到控制台。

綜上所述，本文從多個方面詳細闡述了如何將文件轉換為base64編碼，並提供了完整的代碼示例。讀者可以基於這些示例代碼進一步開發自己的功能或項目。