如何将img标签中的图片上传至服务器（禁用Base64）

解决方案：上传标签中的图片（非Base64方式） #

你当前的代码只是把图片的src路径传给服务器，而非图片文件本身，这是核心问题。要实现上传里的图片且不使用Base64，我们可以通过获取图片的二进制Blob对象，再用FormData通过POST请求上传，具体步骤如下：

1. 修正HTML代码（修复语法错误） #

原HTML存在标签错误、事件绑定语法问题，修正后：

<form id="form-url">
    <img src="/images/defaultImg.jpg" id="testImg1">
    <img src="/images/defaultImg2.jpg" id="testImg2">
    <button type="button" onclick="uploadImages()">UPLOAD</button>
</form>

• 把非标准的<image>改为<img>标签
• 修正按钮的onclick绑定逻辑，设置type="button"避免表单默认提交行为

2. 实现JS上传逻辑 #

方式一：原生JS（无依赖，推荐） #

// 从图片URL获取二进制Blob对象
async function getImageBlob(url) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error(`获取图片失败: ${response.statusText}`);
    }
    return await response.blob();
}

// 上传图片主函数
async function uploadImages() {
    try {
        // 获取两张图片的Blob对象
        const img1Src = document.getElementById('testImg1').src;
        const img2Src = document.getElementById('testImg2').src;
        const img1Blob = await getImageBlob(img1Src);
        const img2Blob = await getImageBlob(img2Src);

        // 组装FormData（文件上传的标准格式）
        const formData = new FormData();
        formData.append('action', 'imageCompare');
        formData.append('firstImage', img1Blob, 'testImg1.jpg'); // 第三个参数为自定义文件名
        formData.append('secondImage', img2Blob, 'testImg2.jpg');

        // 发送POST请求
        const response = await fetch('/appUI/ImageServiceController', {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            alert('success');
        } else {
            throw new Error('服务器返回错误');
        }
    } catch (error) {
        console.error('上传出错:', error);
        alert('failed');
    }
}

方式二：jQuery版本 #

若依赖jQuery，可使用以下代码：

// 获取图片Blob的复用函数
async function getImageBlob(url) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error(`获取图片失败: ${response.statusText}`);
    }
    return await response.blob();
}

// 上传图片主函数
async function uploadImages() {
    try {
        const img1Blob = await getImageBlob($('#testImg1').attr('src'));
        const img2Blob = await getImageBlob($('#testImg2').attr('src'));

        const formData = new FormData();
        formData.append('action', 'imageCompare');
        formData.append('firstImage', img1Blob, 'testImg1.jpg');
        formData.append('secondImage', img2Blob, 'testImg2.jpg');

        $.ajax({
            url: '/appUI/ImageServiceController',
            method: 'POST',
            data: formData,
            processData: false, // 禁止jQuery处理FormData（必须设置）
            contentType: false, // 让浏览器自动设置正确的Content-Type（必须设置）
            success: function(res) {
                alert('success');
            },
            error: function(request, status, errorThrown) {
                console.error('上传出错:', errorThrown);
                alert('failed');
            }
        });
    } catch (error) {
        console.error('上传出错:', error);
        alert('failed');
    }
}

3. 服务器端注意事项 #

服务器需要支持接收multipart/form-data类型的请求，以获取上传的文件：

• Java（Spring）：用@RequestParam("firstImage") MultipartFile firstImage接收
• PHP：通过$_FILES['firstImage']获取文件信息
• Node.js（Express）：使用multer中间件处理文件上传

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