无效的base64编码字符串:数据字符数不能大于1大于4的倍数

Question

我目前正在开发一个web应用程序，前端是经典js，后端是Flask(然后是python)。

当我在base64中上传图像到flask app时，我得到了这个错误。

Invalid base64-encoded string: number of data characters (403869) cannot be 1 more than a multiple of 4

这是我在前端的代码:

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");
xhttp.send(`img=${imgData64}`);

和后端:

@app.route('/upload', methods = ['POST', 'GET'])
def index():
if request.method == 'POST':
img_data = request.form['img']
img_data += '=' * (-len(img_data) % 4)
with open("imageToSave.png", "wb") as fh:
fh.write(base64.decodebytes(img_data.encode()))

Answer 1

我用一种不同的方法解决了一个问题。我在前端(js)和后端(flask - python)更改了位代码。

问题是XMLHttpRequest，我仍然不知道为什么，但取而代之的是，我使用了jQuery版本3的ajax()方法。

$.ajax({
type: "POST",
url: "/upload",
data: {
img: imgData64
}
});

，后端是:

@app.route('/upload', methods = ['POST', 'GET'])
def upload():
if request.method == 'POST':
img = request.form['img']
img_data = img.split(',')[1]
with open("imageToSave.jpg", "wb") as fh:
fh.write(base64.decodebytes(img_data.encode()))

毕竟，旧方法不能工作的原因可能是XMLHttpRequest的setRequestHeader()参数。

无论如何，我建议你使用jQuery，它更简洁。