將文件從Javascript上傳到Google Cloud Endpoint

Question

我正在僅使用HTML5 + Javascript + jQueryMobile創建一個Web應用程序，並且想使用我創建的Google Cloud Endpoint將文件上傳到Google App Engine Web應用程序。

當我控制雙方時，我可以（並希望）創建盡可能簡單的交互。

至於端點，我想到了創建這樣的方法：

@ApiMethod(
  name = "uploadFile",
  path = "upload_file",
  httpMethod = HttpMethod.POST
)
public void uploadFile(File file) {
  //process the file
}

這個File類可以包含Blob類型或byte []之類的字段fileData ，或類似的東西，表示文件數據...諸如此類：

public class File {    
  private String fileName;
  private long fileSize;
  private Blob fileData;    
  //getters and setters
}

因此，第一個問題是： 此字段 fileData 最合適的類型是 什么？

而且，考慮到為該字段選擇的類型， 我如何為該終結點方法使用Javascript / jQuery創建必要的POST請求？

基本上，我需要向http://myappid.appspot.com/_ah/api/files/v1/upload_file創建POST請求，並在POST數據中添加File對象。

注意：很抱歉，我沒有為Javascript代碼做任何嘗試，因為我對這種技術一點都不熟悉，因此，我將不勝感激。

Answer 1

編輯：下面的答案以AppEngine的python版本為目標

這是一個普遍的需求，沒有明確的解決方案。 到目前為止， gae-init-upload演示了如何使用AppEngine和CoffeeScript實現該目標。 值得一看的是，如果您不熟悉，CoffeeScript將被編譯為JavaScript。

您正在尋找的JavaScript解決方案

/main/static/src/coffee/common/upload.coffee

Answer 2

我最終在我的AMD Javascript應用程序中使用了此代碼。 對不起，我不能解釋太多，因為自從我寫了這個項目以來，我已經寫了很多代碼，並且如你所見，我沒有正確地注釋代碼（ 失敗！ ），無論如何，你可能會得到一些想法...

請注意，獲取導航器位置有些事情，因為我想存儲文件上傳的位置，但這根本沒有必要！

Controller.js

    uploadFile: function(request, render) {
        var self = this;
        var file = $("#file").get(0).files[0];

        var reader = new FileReader();            
        reader.onload = function (evt) { 
            var upload = {
                provider: self.folder.provider,
                folderIdentifier: self.folder.id,
                fileName: file.name,
                fileSize: file.size,
                base64Data: btoa(evt.target.result),
                location: {
                    latitude: self.position.coords.latitude, 
                    longitude: self.position.coords.longitude
                }
            }                
            var uploadFilePromise = self.connector.uploadFile(self.sessionToken.token, upload);            
            uploadFilePromise.done(function (file) {
                render("file", {
                    result: "DONE",
                    file: file
                });
            });                
            uploadFilePromise.fail(function (error) {
                render("file", {
                    result: "FAIL"
                });
            });
        }

        navigator.geolocation.getCurrentPosition(function(position) {
            self.position = position;                
            reader.readAsBinaryString(file);
        });
    }

Connector.js

    uploadFile: function (sessionToken, upload) {
        var self = this;
        var promise = new Promise();

        gapi.client.load('upload', 'v1', function() {
            var request = gapi.client.upload.uploadFile({
                session_token: sessionToken, 
                resource: upload
            });
            request.execute(function(response) {
                if (response.error) {
                    promise.reject(response.error);
                }
                else {
                    var file = File.create(response.result.provider,
                                           response.result.type, 
                                           response.result.identifier, 
                                           response.result.name,
                                           response.result.description,                                               
                                           response.result.created,
                                           response.result.size,
                                           response.result.link,
                                           {
                                               latitude: response.result.location.latitude,
                                               longitude: response.result.location.longitude
                                           });
                    promise.resolve(file);
                }
            });
        }, self.api);

        return promise;
    }

Endpoint.java

@Api(name="upload")
public class UploadEndpoint {


    @ApiMethod(
        name = "uploadFile",
        path = "upload_file",
        httpMethod = HttpMethod.POST
    )
    public File uploadFile (
            @Named("session_token") String token, 
            Upload upload) throws InternalServerErrorException {

        File file = new UploadController().uploadFile(token, upload);
        return file;
    }

}