将文件从Javascript上传到Google Cloud Endpoint [英] Upload file from Javascript to Google Cloud Endpoint

问题描述

我正在使用 HTML5 + Javascript + jQueryMobile 创建一个网络应用，我想将文件上传到使用 Google Cloud Endpoint 的Google App Engine 网络应用程序，也是由我创建的。

I'm creating a web app using only HTML5 + Javascript + jQueryMobile and I wanted to upload a file to a Google App Engine web application using a Google Cloud Endpoint, also created by me.

由于我控制双方，我可以（并且想要）尽可能地创建最简单的交互。

As I control both sides, I can (and want to) create the simplest interaction possible.

至于端点，我想到了创建这样的方法：

As for the Endpoint, I thought of creating a method like this:

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

这个文件类可以包含Blob类型的字段 fileData ，或者byte []或者其他什么像这样，重新占用文件数据...类似于：

This File class could contain a field fileData of type Blob, or byte[] or something like that, repersenting the file data... Something like:

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

所以第一个问题是： 此字段最适合的类型 fileData ？

So the first question would be: what's the most suitable type for this field fileData?

并且，考虑到为该字段选择的类型，如何为Javascript / jQuery的端点方法创建必要的POST请求？

And, taking into account the type selected for the field, how could I create the necessary POST request for that endpoint method form Javascript/jQuery?

基本上我需要创建一个POST请求 http://myappid.appspot.com/_ah/api/files/v1/upload_file 添加文件 POST数据中的对象。

Basically I need to create a POST request to http://myappid.appspot.com/_ah/api/files/v1/upload_file adding the File object in the POST data.

注意：对不起，我还没有尝试过Javascript代码因为我对这些技术一点都不熟悉，所以我很感激任何帮助...

推荐答案

我最终在我的AMD Javascript应用程序中使用了此代码。对不起，我无法解释得太多，因为自从我编写这个项目以来，我编写了大量的代码，你可以看到我没有正确评论代码（失败!! ），无论如何也许你可以得到一些想法...

I eventually used this code in my AMD Javascript application. I'm sorry I cannot explain it too much because I've written a big amount of code since I wrote this project, and as you can see I didn't comment the code properly (fail!!), anyway maybe you can get some ideas...

请注意，有一些关于获取导航器位置的东西，因为我想存储文件上传的位置，但是它根本没有必要！

Note that there's something about getting navigator position because I wanted to store the location where the file was uploaded from, but it's not necessary at all!

    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

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

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;
    }

}

这篇关于将文件从Javascript上传到Google Cloud Endpoint的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！