如何将Base64字符串从原生Javascript传递到Node.js？

你的问题核心是FileReader是异步操作——如果你的fetch请求写在load回调函数外面，发起请求时logoUri还没被赋值（因为reader还没完成文件读取），所以传过去的自然是undefined。

解决办法一：把fetch请求放到load回调里 #

直接在拿到Base64字符串的回调里发起POST请求，确保数据已经准备好：

const file = logo.files[0];
if(file.size <= 2e+6){
    const reader = new FileReader();
    reader.addEventListener('load', () => {
        const logoUri = reader.result;
        console.log(logoUri);
        // 在这里发起fetch请求
        fetch('/你的后端接口地址', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ logo: logoUri })
        })
        .then(response => response.json())
        .then(data => console.log('上传成功:', data))
        .catch(error => console.error('上传失败:', error));
    });
    reader.readAsDataURL(file);
}

解决办法二：用Promise封装FileReader（更优雅的异步处理） #

如果代码逻辑复杂，不想把所有代码塞在回调里，可以把FileReader包装成Promise，用async/await来处理：

// 封装FileReader为Promise函数
function fileToBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

// 调用逻辑
async function uploadLogo() {
    const file = logo.files[0];
    if(file.size <= 2e+6){
        try {
            const logoUri = await fileToBase64(file);
            console.log(logoUri);
            // 发起POST请求
            const response = await fetch('/你的后端接口地址', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ logo: logoUri })
            });
            const data = await response.json();
            console.log('上传成功:', data);
        } catch (error) {
            console.error('处理失败:', error);
        }
    }
}

// 触发上传（比如绑定到按钮点击事件）
// document.getElementById('upload-btn').addEventListener('click', uploadLogo);

额外注意点：

• 后端Node.js接口要正确解析JSON请求体，比如Express框架要加express.json()中间件
• MongoDB存储Base64字符串时，字段类型设为String即可，MongoDB的String类型支持足够长度的内容

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