前端原生JS+Flask后端上传Base64图片遇格式错误求助

错误原因 #

• 前端使用application/x-www-form-urlencoded格式发送请求时，Base64字符串中的特殊字符（如+、/）会被自动URL编码：+会变成空格，/会变成%2F。后端直接读取request.form['img']拿到的是被篡改后的字符串，既包含非Base64字符，长度也不符合Base64的4的倍数规则，导致解码失败。
• 后端手动补=的逻辑仅适用于完整的原始Base64字符串，对被篡改后的字符串无效。

解决方案 #

前端修改（二选一） #

方案1：对Base64字符串做URL编码

发送前用encodeURIComponent处理Base64，避免特殊字符被自动转义：

var base64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAIAAAC6s0uzAAAgAElEQVR4nOy9yZIkOZIl+JgZENHNNveIzOyiaaK5DVH1rY+z/N58Q//J9MfMYYiasjK...'
var imgData64 = base64Data.substr(base64Data.indexOf(',') + 1);

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        // 处理响应逻辑
    }
};
xhttp.open("POST", "http://127.0.0.1:5000/upload", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 对Base64字符串进行URL编码
xhttp.send(`img=${encodeURIComponent(imgData64)}`);

方案2：改用FormData传递（更推荐）

FormData会自动处理字符编码问题，无需手动编码：

var base64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAIAAAC6s0uzAAAgAElEQVR4nOy9yZIkOZIl+JgZENHNNveIzOyiaaK5DVH1rY+z/N58Q//J9MfMYYiasjK...'
var imgData64 = base64Data.substr(base64Data.indexOf(',') + 1);

var formData = new FormData();
formData.append('img', imgData64);

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        // 处理响应逻辑
    }
};
xhttp.open("POST", "http://127.0.0.1:5000/upload", true);
// 无需手动设置Content-type，浏览器会自动添加正确的头部
xhttp.send(formData);

后端修改 #

优化解码逻辑，base64.b64decode会自动处理Base64字符串的补位（=）和部分非标准字符，无需手动补=：

import base64
from flask import Flask, request

app = Flask(__name__)

@app.route('/upload', methods = ['POST', 'GET'])
def index():
    if request.method == 'POST':
        img_data = request.form['img']
        # 若前端未做URL编码，可先替换空格为+（方案1编码后无需此步骤）
        # img_data = img_data.replace(' ', '+')
        with open("imageToSave.png", "wb") as fh:
            fh.write(base64.b64decode(img_data))
    return '上传完成'

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