您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

JavaScript 圖片轉 Base64 完全指南：FileReader API 實戰

編輯：程式設計綜合問答

前端純 JS 實現圖片文件轉 Base64 字符串，無需 Canvas

常見需求：用戶選擇圖片 → 即時預覽 / 上傳前壓縮 / 存入 LocalStorage。本文提供最簡潔、兼容性最好的 FileReader.readAsDataURL 方案。

核心代碼（5 行搞定）

<input type="file" id="imgInput" accept="image/*">
<img id="preview" style="max-width:200px; display:none;">

<script>
document.getElementById('imgInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(event) {
        const base64 = event.target.result;  // "data:image/png;base64,iVBORw0K..."
        document.getElementById('preview').src = base64;
        document.getElementById('preview').style.display = 'block';
        // 此處可將 base64 發送給後端或存儲
    };
    reader.readAsDataURL(file);  // 關鍵：異步讀取並自動編碼為 Data URL
});
</script>

為什麼不用 Canvas？

方案	優點	缺點
FileReader.readAsDataURL	原生 API、自動處理 MIME、無畫布上下文、代碼極簡	無法壓縮/裁剪，輸出體積 = 原文件體積 + 33%
Canvas + toDataURL	可壓縮、裁剪、旋轉、濾鏡	需繪製圖片、跨域圖片污染畫布、代碼複雜

結論：僅需 Base64 字符串（預覽、傳輸）時，首選 FileReader；需客戶端壓縮時再上 Canvas。

進階：獲取純 Base64（去掉 Data URL 前綴）

reader.onload = function(e) {
    const dataUrl = e.target.result;
    const base64 = dataUrl.split(',')[1];  // 取逗號後的純編碼
    // 發送給後端：{ image: base64, mime: file.type }
};

兼容性提示

IE10+ 完全支持 FileReader。
舊版 IE 需用 Flash/Fallback 或 FileReaderSync (Web Worker)。
移動端 WebView 可能限制文件訪問，需在 <input> 加 capture="camera" 調用攝像頭。

完整封裝：Promise 版工具函數

function fileToBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result.split(',')[1]);
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

// 使用
document.getElementById('imgInput').addEventListener('change', async (e) => {
    try {
        const base64 = await fileToBase64(e.target.files[0]);
        console.log('Base64 length:', base64.length);
    } catch (err) {
        console.error('轉換失敗', err);
    }
});

掌握這套流程，即可輕鬆實現圖片預覽、Base64 上傳、離線存儲等常見功能。