readAsDataURL实现图片预览后base64图片上传体积过大问题求助

问题根源 #

• 你当前使用$.getJSON通过GET请求上传base64格式的图片数据，HTTP GET请求的URL长度存在浏览器、服务器双重限制，通常仅支持2KB~8KB的长度，图片base64超过限制就会触发报错。
• base64编码会让数据体积比原文件增加约33%，进一步放大了传输上限问题。
• 你担心直接传文件会丧失预览功能是误解，预览和上传可以完全解耦，不需要把预览用的base64传到后端。

最优解决方案（兼顾预览+大文件上传） #

核心逻辑：本地预览仍然用FileReader读取base64显示，上传时直接传输原始文件对象，走POST请求。

1. JS代码修改 #

// 全局存储用户选中的文件对象
let selectedFile = null;

function readURL(input) {
    if (input.files && input.files[0]) {
        // 新增文件大小校验，可按需调整上限
        if (input.files[0].size > 5 * 1024 * 1024) {
            alert("图片大小不能超过5M");
            return;
        }
        selectedFile = input.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#imagePreview').css('background-image', 'url('+e.target.result +')');
            $('#imagePreview').hide();
            $('#imagePreview').fadeIn(650);
            // 无需再把base64存入输入框，减少不必要的DOM操作
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$("#imageUpload").change(function() {
    readURL(this);
});

function saveimg() {
    if (!selectedFile) {
        alert("请先选择要上传的图片");
        return;
    }
    // 使用FormData封装文件对象
    const formData = new FormData();
    formData.append('new_img', selectedFile);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: formData,
        contentType: false, // 禁止jQuery自动设置Content-Type，边界符会自动生成
        processData: false, // 禁止jQuery序列化数据，保留文件对象格式
        success: function() {
            alert("上传成功");
        },
        error: function() {
            alert("上传失败，请重试");
        }
    });
}

2. HTML代码修改 #

删除用于存储base64的冗余输入框，简化按钮点击事件：

<button type="button" class="button" onclick="saveimg()">保存图片</button>

3. PHP后端代码修改 #

现在直接接收POST上传的文件，无需处理base64解码，同时新增基础安全校验：

// 校验文件上传状态
if (!isset($_FILES['new_img']) || $_FILES['new_img']['error'] !== UPLOAD_ERR_OK) {
    exit(json_encode(['code' => 1, 'msg' => '文件上传异常']));
}

// 校验文件类型，避免非法文件上传
$allowType = ['image/jpeg', 'image/png', 'image/jpg'];
if (!in_array($_FILES['new_img']['type'], $allowType)) {
    exit(json_encode(['code' => 2, 'msg' => '仅支持jpg、png格式的图片']));
}

// 目标存储目录，不存在则自动创建
$saveDir = 'img/operators/';
if (!is_dir($saveDir)) {
    mkdir($saveDir, 0755, true);
}

// 文件名建议动态生成，避免覆盖旧文件，示例用时间戳+随机数
$fileName = time() . mt_rand(1000, 9999) . '.' . pathinfo($_FILES['new_img']['name'], PATHINFO_EXTENSION);
$savePath = $saveDir . $fileName;

// 移动临时文件到目标目录
if (move_uploaded_file($_FILES['new_img']['tmp_name'], $savePath)) {
    exit(json_encode(['code' => 0, 'msg' => '上传成功']));
} else {
    exit(json_encode(['code' => 3, 'msg' => '文件保存失败，请检查目录权限']));
}

替代方案（如需继续传输base64） #

如果业务场景确实需要传输base64，只需要修改请求方式为POST即可：

1. JS部分将$.getJSON改为$.post，把base64放在请求体传输
2. PHP部分将$_GET["new_img"]改为$_POST["new_img"]，原有解码逻辑不变
   注意该方案传输效率比直接传文件低30%左右，仅推荐特殊场景使用

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