如何使用 python 将 BLOB 转换为图像

Question

我需要使用 blob 将图像从客户端发送到服务器

我已经在 jquery（客户端）中将图像转换为 BLOB 并将 blob 发送到 python 烧瓶（服务器端）问题是，我无法从 BLOB 重新创建图像。我在python中尝试了以下代码，但无法获取图像

将图像转换为 blob 的 Jquery 代码：

function changeFile() {
     var file = this.files[0];
     var reader = new FileReader();
     reader.addEventListener('load', readFile);
     reader.readAsText(file);
}

function readFile(event) {
     document.body.textContent = event.target.result;
     console.log(event.target.result);
     appendFileAndSubmit(event.target.result);
}


function appendFileAndSubmit(imageUrl){
     var ImageURL = imageUrl
     var data = {
          'logo':ImageURL
          }
             $.ajax({
                        url: 'http://sdsdss/User/imgBlob',
                        method: 'POST',
                        dataType : 'json',
                        data: JSON.stringify(data),
                        contentType: 'application/json; charset=utf-8'
                    }).done(function(response){    
                        var datas = JSON.parse(response);
                        console.log(datas);
                    });
                }
document.getElementById("inp").addEventListener("change", changeFile);

Python 代码：将BLOB 重新创建为图像

function getImage(self):
     reqData = json.loads(request.data)
     Logo = reqData['logo']
     png_recovered = base64.decodestring(Logo)
     f = open("temp.png", "w")
     f.write(png_recovered)
     f.close()

Answer 1

1. 不要将文件作为文本读取，您正在处理二进制数据。
   使用 json 传输二进制文件的最佳方法是，如果您将文件读取为 base64，而不是 reader.readAsDataURL(file) 这会将所有字节编码到网络安全base64 字符串（没有斜线或加号）。然后你还得用python解码。

2. 我不鼓励您在处理文件传输时使用 json，因为它会增加大约 3 倍的带宽（更不用说来回解码和编码所需的时间）为此我建议您改为使用FormData。

var fd = new FormData()
fd.append('logo', files[0])

$.ajax({
  url: 'http://sdsdss/User/imgBlob',
  method: 'POST',
  data: fd,
  // Setting false prevent jQuery from transforming the data
  processData: false,
  contentType: false
}).then(function(response) {
  console.log(JSON.parse(response))
})

或者更简单一点，如果不需要，只需发布​​不带任何 formdata、json 或额外字段的文件。

fetch(uploudUrl, { method 'PUT', body: this.files[0] })