如何在 AppEngine 中存储 base64 编码的图像？

Question

I'm trying to create a blobstore entry from an image data-uri object, but am getting stuck.

Basically, I'm posting via ajax the data-uri as text, an example of the payload:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPA...

I'm trying to receive this payload with the following handler. I'm assuming I need to convert the data-uri back into an image before storing? So am using the PIL library.

My python handler is as follows:

import os
import urllib
import webapp2
from google.appengine.ext.webapp import template
from google.appengine.ext import blobstore
from google.appengine.ext.webapp import blobstore_handlers
from google.appengine.api import images

class ImageItem(db.Model):
  section = db.StringProperty(required=False)
  description = db.StringProperty(required=False)
  img_url = db.StringProperty()
  blob_info = blobstore.BlobReferenceProperty()
  when = db.DateTimeProperty(auto_now_add=True)


#Paste upload handler
class PasteUpload(webapp2.RequestHandler):
    def post(self):
        from PIL import Image
        import io
        import base64

        data = self.request.body
        #file_name = data['file_name']

        img_data = data.split('data:image/png;base64,')[1]

        #Convert base64 to jpeg bytes
        f = Image.open(io.BytesIO(base64.b64decode(img_data)))

        img = ImageItem(description=self.request.get('description'), section=self.request.get('section') )
        img.blob_info = f.key()
        img.img_url = images.get_serving_url( f.key() )
        img.put()

This is likely all kinds of wrong. I get the following error when posting:

img.blob_info = f.key()
AttributeError: 'PngImageFile' object has no attribute 'key'

What am I doing wrong here? Is there an easier way to do this? I'm guessing I don't need to convert the data-uri into an image to store as a blob?

I also want this Handler to return the URL of the image created in the blobstore.

Answer 1

There are a couple of ways to view your question and the sample code you posted, and it's a little confusing what you need because you are mixing strategies and technologies.

POST base64 to _ah/upload/...

Your service uses create_upload_url() to make a one-time upload URL/session for your client. Your client makes a POST to that URL and the data never touches your service (no HTTP-request-size restrictions, no CPU-time spent handling the POST). An App Engine internal "blob service" receives that POST and saves the body as a Blob in the Blobstore. App Engine then hands control back to your service in the BlobstoreUploadHandler class you write and then you can determine how you want to respond to the successful POST. In the case of the example/tutorial, PhotoUploadHandler redirects the client to the photo that was just uploaded.

That POST from your client must be encoded as multipart/mixed and use the fields shown in the example HTML <form> .

The multipart form can take the optional parameter, Content-Transfer-Encoding , and the App Engine internal handler will properly decode base64 data. From blob_upload.py :

base64_encoding = (form_item.headers.get('Content-Transfer-Encoding') ==
                           'base64')
...

if base64_encoding:
  blob_file = cStringIO.StringIO(base64.urlsafe_b64decode(blob_file.read()))

...

Here's a complete multipart form I tested with cURL, based on the fields used in the example. I found out how to do this over at Is there a way to pass the content of a file to curl? :

myconfig.txt :

header = "Content-length: 435"
header = "Content-type: multipart/mixed; boundary=XX
data-binary = "@myrequestbody.txt"

myrequestbody.txt :

--XX
Content-Disposition: form-data; name="file"; filename="test.gif"
Content-Type: image/gif
Content-Transfer-Encoding: base64

R0lGODdhDwAPAIEAAAAAzMzM/////wAAACwAAAAADwAPAAAIcQABCBxIsODAAAACAAgAIACAAAAiSgwAIACAAAACAAgAoGPHACBDigwAoKTJkyhTqlwpQACAlwIEAJhJc6YAAQByChAAoKfPn0CDCh1KtKhRAAEAKF0KIACApwACBAAQIACAqwECAAgQAIDXr2DDAggIADs=
--XX
Content-Disposition: form-data; name="submit"

Submit
--XX--

and then run like:

curl --config myconfig.txt "http://127.0.0.1:8080/_ah/upload/..."

You'll need to create/mock-up the multipart form in your client.

Also, as an alternative to Blobstore, you can use Cloud Storage if you want to save a little on storage costs or have some need to share the data without your API. Follow the documentation for Setting Up Google Cloud Storage , and then modify your service to create the upload URL for your bucket of choice:

create_upload_url(gs_bucket_name=...)

It's a little more complicated than just that, but reading the section Using the Blobstore API with Google Cloud Storage in the Blobstore document will get you pointed in the right direction.

POST base64 directly to your service/handler

Kind of like you coded in the original post, your service receives the POST from your client and you then decide if you need to manipulate the image and where you want to store it (Datastore, Blobstore, Cloud Storage).

If you need to manipulate the image, then using PIL is good:

from io import BytesIO
from PIL import Image
from StringIO import StringIO

data = self.request.body
#file_name = data['file_name']

img_data = data.split('data:image/png;base64,')[1]

# Decode base64 and open as Image
img = Image.open(BytesIO(base64.b64decode(img_data)))

# Create thumbnail
img.thumbnail((128, 128))

# Save img output as blob-able string
output = StringIO()
img.save(output, format=img.format)
img_blob = output.getvalue()

# now you choose how to save img_blob

If you don't need to manipulate the image, just stop at b64decode() :

img_blob = base64.b64decode(img_data)

Answer 2

An image object ( https://cloud.google.com/appengine/docs/standard/python/refdocs/google.appengine.api.images ) isn't a Datastore entity, so it has no key. You need to actually save the image to blobstore[2] or Google Cloud Storage[1] then get a serving url for your image.

[1] https://cloud.google.com/appengine/docs/standard/python/googlecloudstorageclient/setting-up-cloud-storage

[2] https://cloud.google.com/appengine/docs/standard/python/blobstore/