提交表单到HomeController前如何将5个input[type=file]图片转为Base64

实现思路 #

• 拦截表单的默认提交事件，避免直接上传原始文件
• 利用浏览器原生FileReaderAPI逐一把选中的jpg/png图片转换为Base64编码
• 将转换后的Base64字符串存入表单隐藏字段后，再向服务端发起提交

完整实现代码 #

直接在页面中引入以下JS脚本即可生效：

// 监听表单提交事件
document.getElementById('frm').addEventListener('submit', async function(e) {
    // 阻止默认的原始文件提交行为
    e.preventDefault();
    const form = this;
    
    // 清空之前生成的Base64隐藏字段，避免重复提交
    document.querySelectorAll('.base64-img-field').forEach(field => field.remove());
    
    // 选中所有图片类型的文件输入框
    const fileInputs = form.querySelectorAll('input[type="file"][accept^="image/*"]');
    // 并行处理所有图片的转换任务
    const convertTasks = Array.from(fileInputs).map(input => {
        return new Promise((resolve, reject) => {
            const file = input.files[0];
            // 未选中文件直接返回空值
            if (!file) {
                resolve({ name: input.name, value: '' });
                return;
            }
            // 校验文件格式，仅允许png、jpg
            const allowedTypes = ['image/jpeg', 'image/png'];
            if (!allowedTypes.includes(file.type)) {
                alert(`${input.name}仅支持上传jpg、png格式图片`);
                reject(new Error('文件格式不合法'));
                return;
            }
            const reader = new FileReader();
            reader.onload = () => {
                // reader.result 即为转换完成的Base64字符串
                resolve({ name: input.name, value: reader.result });
            };
            reader.onerror = reject;
            reader.readAsDataURL(file);
        });
    });
    
    try {
        // 等待所有图片转换完成
        const base64Images = await Promise.all(convertTasks);
        // 将Base64内容写入隐藏表单字段
        base64Images.forEach(img => {
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = img.name;
            hiddenInput.value = img.value;
            hiddenInput.className = 'base64-img-field';
            form.appendChild(hiddenInput);
        });
        // 提交表单到HomeController
        form.submit();
    } catch (err) {
        console.error('图片转换失败：', err);
    }
});

后端接收说明 #

HomeController中直接按原参数名Img1到Img5接收即可，拿到的就是对应图片的Base64字符串，若用户未选中对应输入框的图片，参数值为空字符串。

内容的提问来源于stack exchange，提问作者Marco de Villiers