问题描述
我正在使用 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!