ajax - 在 Django 中使用 fileReader.readAsDataURL 通过 Ajax 传输图像并在 PIL 中打开

Question

几天都打不过的问题。我需要通过 AJAX 将图像作为 JSON 传输。我使用 fileReader.readAsDataURL 将其编码为 base64，然后进行传输。但是PIL不会打开它。这是我的代码:

脚本.js:

function imageloader(callBack){
var input = $('#photo');
var file = input.prop('files')[0];
var reader = new FileReader();
reader.onload = function(){
    callBack(reader.result);

};
reader.readAsDataURL(file);

$('#edit_form').submit(function (eve) {
    eve.preventDefault();
    var form = $.toJSON($(this).serializeArray());
    imageloader(function(image){
        var image_data = $.toJSON(image);
        sender(form,image_data);
    });
});    

View .py:

def post(self, request):
    form = request.POST.get('form')
    image = request.POST.get('image')
    new_image = json.loads(image)
    data = json.loads(form)
    new_data = {}
    for i in data:
        new_data[i['name']] = i['value']
    new_data['photo'] = resize_picture(new_image)
...
def resize_picture(file):
    file = file.split(',')[1]
    bytes = (BytesIO(base64.b64decode(file)))
    bytes.seek(0)
    image = bytes.read()
    img = Image.open(image)
    img.thumbnail(IMAGE_SIZE, Image.ANTIALIAS)
    return img

每次尝试时，我都会从 PIL 尝试打开文件时收到此错误:

 file() argument 1 must be encoded string without NULL bytes, not str 

我错过了什么吗？

Answer 1

filereader.readAsDataURL 函数生成一个数据 URL，它是一个 unicode 字符串，格式为“data:[image type];[encoding],[THEENCODEDSTUFF....]”。

要在 python 中处理它并可能将其分配给图像字段，请从我下面的代码片段中挑选(上传的数据在变量 url_data 上，django 模型对象上的图像字段是 obj.avatar_image):

    img_dict = re.match("data:(?P<type>.*?);(?P<encoding>.*?),(?P<data>.*)", url_data).groupdict()
    blob = img_dict['data'].decode(img_dict['encoding'], 'strict')
    image = Image.open(StringIO(blob))
    image = image.resize((75, 75), Image.ANTIALIAS)
    f = StringIO()
    try:
        image.save(f, format='png')
        filename = os.path.splitext(filename)[0] + '.png'
        obj.avatar_image.save(filename, ContentFile(f.getvalue()))
    finally:
            f.close()