Images API 範例

瞭解如何使用 Images API,以動態的方式上傳、轉換、儲存及提供圖片。本範例是入門指南中留言板範例的延伸,並會修改該範例,讓使用者上傳包含個人問候內容的顯示圖片。

在 Datastore 中建立圖片模型

您必須更新留言板範例中的模型,以 blob 形式儲存上傳的圖片。

class Greeting(ndb.Model):
    """Models a Guestbook entry with an author, content, avatar, and date."""
    author = ndb.StringProperty()
    content = ndb.TextProperty()
    avatar = ndb.BlobProperty()
    date = ndb.DateTimeProperty(auto_now_add=True)

上傳使用者圖片

您必須修改 HTML 表單,讓使用者上傳圖片:

  1. 新增欄位,讓使用者從電腦中選取要上傳的檔案。

  2. 在表單標記中新增 enctype 屬性,並說明這是包含多個部分的表單貼文。

    self.response.out.write("""
          <form action="/sign?%s"
                enctype="multipart/form-data"
                method="post">
            <div>
              <textarea name="content" rows="3" cols="60"></textarea>
            </div>
            <div><label>Avatar:</label></div>
            <div><input type="file" name="img"/></div>
            <div><input type="submit" value="Sign Guestbook"></div>
          </form>
          <hr>
          <form>Guestbook name: <input value="%s" name="guestbook_name">
          <input type="submit" value="switch"></form>
        </body>
      </html>""" % (urllib.urlencode({'guestbook_name': guestbook_name}),
                    cgi.escape(guestbook_name)))
  3. 更新留言板處理常式以取得表單貼文中的圖片資料,並以 blob 形式將圖片資料儲存在資料儲存庫中。

    class Guestbook(webapp2.RequestHandler):
        def post(self):
            guestbook_name = self.request.get('guestbook_name')
            greeting = Greeting(parent=guestbook_key(guestbook_name))
    
            if users.get_current_user():
                greeting.author = users.get_current_user().nickname()
    
            greeting.content = self.request.get('content')
    
            avatar = self.request.get('img')
            avatar = images.resize(avatar, 32, 32)
            greeting.avatar = avatar
            greeting.put()
    
            self.redirect('/?' + urllib.urlencode(
                {'guestbook_name': guestbook_name}))

轉換圖片

如要建立 32x32 顯示圖片,請按照下列步驟操作:

  1. 匯入 google.appengine.api.images 模組。

    from google.appengine.api import images
  2. 呼叫 resize 函式並傳入圖片資料。

    avatar = images.resize(avatar, 32, 32)

動態提供圖片

如要提供圖片,請按照下列步驟操作:

  1. 建立可根據 /img 路徑動態提供圖片的圖片處理常式。

    class Image(webapp2.RequestHandler):
        def get(self):
            greeting_key = ndb.Key(urlsafe=self.request.get('img_id'))
            greeting = greeting_key.get()
            if greeting.avatar:
                self.response.headers['Content-Type'] = 'image/png'
                self.response.out.write(greeting.avatar)
            else:
                self.response.out.write('No image')
  2. 更新 HTML 以顯示這類動態提供的圖片。

    self.response.out.write('<div><img src="/img?img_id=%s"></img>' %
                            greeting.key.urlsafe())
    self.response.out.write('<blockquote>%s</blockquote></div>' %
                            cgi.escape(greeting.content))

由於圖片處理常式是從要求取得 img_id,因此您必須更新留言版的 HTML,將問候內容的金鑰傳送至圖片處理常式。

將應用程式部署至 App Engine

如要上傳留言板應用程式,請在 app.yamlindex.yaml 檔案所處的應用程式 guestbook 目錄中執行以下指令:

gcloud app deploy app.yaml index.yaml

在應用程式正式上線前,可能需要花點時間才能產生 Datastore 索引。如果索引仍在產生中,您在存取應用程式時會收到 NeedIndexError 訊息。此為暫時性錯誤;如果您在一開始時收到此錯誤,請稍後再試一次。

如要進一步瞭解如何透過指令列部署應用程式,請參閱部署 Python 應用程式一文。

查看部署的應用程式

如要啟動瀏覽器並在 http://[YOUR_PROJECT_ID].appspot.com 查看應用程式,請執行下列指令:

gcloud app browse
本頁內容對您是否有任何幫助?請提供意見:

傳送您對下列選項的寶貴意見...

這個網頁
Python 2 適用的 App Engine 標準環境