使用PhoneGap和Google App Engine上传和保存图片

Question

目标：在一个PhoneGap应用中拍照或附加图片，并将每张图片的公共链接发送到Google Cloud SQL数据库。

问题 1：有没有办法从一个经过base64编码的图片（用Python）创建一个Google Cloud Storage对象，然后把这个对象上传到一个存储桶，并返回一个公共链接？

我想用PhoneGap把图片发送到一个Python的Google App Engine应用，然后让这个应用把图片发送到我设置好的Google Cloud Storage存储桶，最后再把公共链接返回给PhoneGap应用。这些图片可以直接在应用中拍摄，也可以是用户设备上已有的照片。

我使用PhoneGap的FileTransfer插件把图片上传到GAE，这些图片是以base64编码的形式发送的（这个我无法控制）。

根据我在Google文档中找到的信息，我可以把图片上传到Blobstore；但是，这需要在表单中有<input type='file'>元素。我没有'file'输入元素；我只是从PhoneGap的相机对象获取返回的图片URI，并显示拍摄（或附加）的图片缩略图。

问题 2：有没有可能有一个<input type='file'>元素，并控制它的值？也就是说，是否可以根据用户选择文件或拍照来设置它的值？

提前谢谢你！

Answer 1

没错，这确实是使用GAE（谷歌应用引擎）和GCS（谷歌云存储）的好方法。你不一定需要一个 <input type=file> 的输入框。你可以直接在调用你的GAE网址时设置 POST 参数。记得也要发送一个隐藏的密钥，并且使用SSL安全的网址，这样可以防止垃圾信息发送到你的应用里。

Answer 2

这里有一个解决方案，供可能遇到这个问题的朋友们参考。其实这个方法非常简单！

一旦你为你的GAE项目设置好了一个存储桶（也就是用来存放文件的地方），你可以使用下面的Python代码将一张图片发送到这个存储桶：

import cloudstorage as gcs
import webapp2
import cgi
import MySQLdb
import os
import logging
import time

from google.appengine.api import mail
from google.appengine.api import images
from google.appengine.ext import blobstore

class UploadImageHandler(webapp2.RequestHandler):
    def post(self):
        self.response.headers.add_header(ACCESS_CONTROL, '*')

        f = self.request.POST['image']
        fname = '/your-bucket-name/%s' % f.filename;

        gcs_file = gcs.open(fname, 'w', content_type="image/jpeg")
        gcs_file.write(self.request.get('image'))
        gcs_file.close()

还有从PhoneGap应用上传文件所用的代码：

// Uploads images in "imageURIs" to the web service specified in "server".
function uploadImages(imageURIs, server) {
    var success = function(data) {
        alert("Successfully uploaded image!");
    };

    var fail = function(error) {
        alert("Failed to upload image: "+error);
    };

    var options = new FileUploadOptions();
    options.fileKey = "image";
    options.mimeType = "image/jpeg";
    var ft = new FileTransfer();

    for (var i = 0; i < imageURIs.length; i++) {
        alert("Uploading"+i);
        options.fileName = imageURIs[i].substr(imageURIs[i].lastIndexOf('/') + 1);
        ft.upload(imageURIs[i], encodeURI(server), success, fail, options);
    }
}

希望这能帮助到其他人。:)