使用String.fromCharCode处理大文件触发参数过多RangeError问题

复现代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="file" name="fileSelector" id="fileSelector" onchange="imageSelected(this)" accept=".png, .jpg, .jpeg, .webp" multiple>
    
</body>
</html>

JavaScript

function bufferToBase64(buffer){
    return encodeURIComponent(btoa(String.fromCharCode(...new Uint8Array(buffer))));
}


async function imageSelected(input){
    for (let i = 0; i < input.files.length; i++) {
        let file = input.files[i];
        let buffer = await file.arrayBuffer();
        console.log(file);
        console.log(buffer);
        console.log(bufferToBase64(buffer));

        //.......remaining stuff
    }
}

问题现象 #

处理300KB以内的小文件时运行正常，但处理650KB及更大的文件时，会抛出错误：

Uncaught (in promise) RangeError: too many function arguments

测试2.6MB的图片也会触发该错误。请问此问题原因是什么？是否存在大小限制？

问题原因及解决方案 #

原因解析 #

错误根源在bufferToBase64函数里的这行代码：

String.fromCharCode(...new Uint8Array(buffer))

...展开运算符会把Uint8Array的每一个字节作为单独参数传给String.fromCharCode，而JavaScript引擎对函数的参数数量有上限（不同浏览器引擎上限略有差异，但普遍在几万到几十万级别）。650KB的文件对应665600个参数，远超引擎允许的参数数量上限，因此触发RangeError。

解决方案 #

方案1：分块处理Uint8Array

将大数组拆分成小分块，避免一次性传入过多参数：

function bufferToBase64(buffer) {
    const uint8Arr = new Uint8Array(buffer);
    let base64Str = '';
    // 每次处理16KB的分块，可根据需求调整大小
    const chunkSize = 16 * 1024;
    for (let i = 0; i < uint8Arr.length; i += chunkSize) {
        // 截取当前分块
        const chunk = uint8Arr.subarray(i, i + chunkSize);
        base64Str += btoa(String.fromCharCode(...chunk));
    }
    return encodeURIComponent(base64Str);
}

方案2：使用FileReader直接转DataURL（推荐）

利用浏览器原生FileReader的readAsDataURL方法，直接将文件转为Base64格式，无需手动处理buffer，更高效稳定：

async function imageSelected(input) {
    for (let i = 0; i < input.files.length; i++) {
        const file = input.files[i];
        // 用Promise封装FileReader的异步操作
        const base64 = await new Promise((resolve) => {
            const reader = new FileReader();
            reader.onload = () => {
                // split(',')[1]提取DataURL中的Base64部分
                resolve(reader.result.split(',')[1]);
            };
            reader.readAsDataURL(file);
        });
        const encodedBase64 = encodeURIComponent(base64);
        console.log(file);
        console.log(encodedBase64);
        // 后续业务逻辑
    }
}

第二种方案完全规避了参数数量限制的问题，且代码更简洁，浏览器原生实现的性能也更优。

内容的提问来源于stack exchange，提问作者sudoExclamationExclamation