ブログに画像添付機能を実装

水曜日, 1月 5th, 2011 by

python-blog-systemに画像アップロード機能を実装しました。画像アップロード機能と一言でいっても、実際には以下の3つの機能から成り立っています。

  1. 画像のアップロード
  2. アップロードした画像の取り出し
  3. 記事内でのタグ置換

それぞれ、具体的にソースコードを交えながら解説します。

1. 画像アップロード

Formのinput type=file要素を使って、画像をサーバに渡します。お見せするほどのソースコードではないですね。定型文です。

1
2
3
<form action="/uploader" enctype="multipart/form-data" method="post"><input type="hidden" name="phpMyAdmin" value="cfc2644bd9c947213a0141747c2608b0" />
<input type="file" name="file"><input type="submit" value="Upload">
</form>

フォームから送信されたファイルをうけとります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  application = webapp.WSGIApplication([
....# 関係のないハンドラは省略
    ('/uploader/?(.*)', UploaderHandler)
...略...
], debug=True)

#データモデル
class Image(db.Model):
  image = db.BlobProperty()
  contentType = db.StringProperty()

#アップロード処理の実体
class UploaderHandler(webapp.RequestHandler)):
  def get(self, key):
....#フォーム表示部分を省略
  def post(self, key):
    if self.request.get('file'):
      image = Image()
      image.image = self.request.POST.get('file').file.read() #画像本体
      image.contentType = self.request.body_file.vars['file'].headers['content-type'] #ContentType
      image.put()
    self.redirect('/uploader')

以上で、画像のアップロードは完了です。

2. アップロードした画像の取り出し

HeaderにContent-Typeを指定しているのがポイントです。

1
2
3
4
5
6
7
8
9
10
11
12
13
class ImageHandler(AuthHandler):
  def get(self, key):
    image = Image.get(key)
    self.response.headers['Content-Type'] = image.contentType.encode('utf-8')
    self.response.out.write(image.image)

def main():
  application = webapp.WSGIApplication([
...略...
    ('/image/(.*)', ImageHandler),
...略...
  ], debug=True)
  util.run_wsgi_app(application)

3. 記事内でのタグ置換

ブログの本文はHTMLエンコード処理をかけているため、imgタグを使うことができません。そこで、独自の画像埋め込みタグを実装しました。投稿画面で[img:xxx]と記述すると、HTMLには<img src=”/image/xxx” style=”max-width:400px”>と出力されます。

1
2
def replaceImages(str):
  return re.sub(r'\[img:(.*)\]', r'<img src="/image/\1" style="max-width:400px">', str)

ブログのエントリー内では、部分的にしかソースコードを公開できていませんが、ある程度実装が落ち着いたら、ソースコード全体を公開しようと思っています。

Facebook comments:

comments

Leave a Reply


Get Adobe Flash player
single