如何通过AJAX POST请求将图片及处理参数发送至服务器？

你的问题核心在于错误的文件传输方式：

• File对象无法通过JSON.stringify序列化，转成JSON后会变成空对象{}，导致服务器接收不到图片内容
• application/x-www-form-urlencoded类型不支持传输文件，必须用multipart/form-data格式，而FormData对象会自动帮你处理正确的请求头和数据格式

修改后的代码 #

const imageInput = document.getElementById('imageInput');

function ajaxSend(url, formData) {
    fetch(url, {
        method: 'POST',
        // 无需手动设置Content-Type，FormData会自动添加正确的multipart/form-data请求头
        body: formData,
    })
        .then(response => response.json())
        .then(json => {
            // 这里处理返回的处理后图片，比如更新预览图的src
            document.getElementById('previewImg').src = json.processed_image_url;
        })
        .catch(error => console.error(error))
}

const colorTone = document.getElementById('ColorToneImg');

colorTone.addEventListener('change', function (e) {
    if (!imageInput.files[0]) {
        console.error('请先选择图片');
        return;
    }
    
    const selectedColor = e.target.value;
    const url = this.getAttribute('data-action');
    
    // 创建FormData对象，专门用于传输文件和表单数据
    const formData = new FormData();
    formData.append('img', imageInput.files[0]); // 追加图片文件
    formData.append('color_tone', selectedColor); // 追加色调参数
    
    ajaxSend(url, formData);
});

服务器端接收示例（以Django为例） #

服务器需要从request.FILES获取上传的图片，从request.POST获取参数：

def handle_image_process(request):
    if request.method == 'POST':
        # 获取上传的图片文件
        img_file = request.FILES.get('img')
        # 获取色调参数
        color_tone = request.POST.get('color_tone')
        
        # 执行图片色调调整逻辑...
        
        # 返回处理后的图片URL（假设已保存到媒体目录）
        processed_img_url = '/media/processed_image.jpg'
        return JsonResponse({'processed_image_url': processed_img_url})

注意事项 #

• 确保服务器端配置了正确的文件上传支持（比如Django需设置MEDIA_ROOT和MEDIA_URL）
• 如果需要多次复用同一张图片进行参数调整，也可以先将图片转为Base64字符串传输，但大图片建议优先用FormData方案

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