如何使用XmlHttpRequest 2.0將5 MB文件上傳到App Engine BlobStore？

我們都知道，App Engine將大多數輸入/輸出請求限制爲1 MB。但是通過最近的BlobStore API，您可以通過發佈到動態生成的URL來完整地上傳大文件。如何使用XmlHttpRequest 2.0將5 MB文件上傳到App Engine BlobStore？

根據樣本，這裏是HTML形式會是什麼樣子：

self.response.out.write('<html><body>') 
self.response.out.write('<form action="%s" method="POST" 
    enctype="multipart/form-data">' % upload_url) 
    self.response.out.write("""Upload File: 
<input type="file" name="file"><br> 
<input type="submit" name="submit" value="Submit"> 
</form></body></html>""")

但是我們該怎麼辦這個異步使用JavaScript技術與HTML5出臺？這是我到目前爲止有一個片段：

xhr.open("POST", post_url); // the post URL given by App Engine 
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); 
xhr.setRequestHeader('Cache-Control', 'no-cache'); 
xhr.setRequestHeader('X-File-Name', file.fileName); 

// After loading the binary data (last time we only read as base64 string) 
// Tell xhr to start the upload 
myBinaryDataReader.addEventListener("loadend", function(evt){ 
    xhr.sendAsBinary(evt.target.result); 
}, false); 

// Initiate the binary reading on the file, when finished it will 
// upload asynchronously 
myBinaryDataReader.readAsBinaryString(file);

你會發現，這一技術將原始的二進制文件作爲POST體。這很好，它可以在不需要BlobStore的情況下工作達1 MB。在Python中，讀取該文件，我只是用：

img_data = self.request.body # got my image data now

然而，隨着BLOBSTORE，我應該使用

upload_files = self.get_uploads('file') # 'file' is file upload field in the form

但我不會使用與輸入型HTML表單= file，我正在使用XmlHttpRequest - 我如何讓App Engine「認爲」它是HTML表單中的文件，從而「抓取」文件數據？

我的代碼，未修改，導致錯誤

File "C:\Python26\lib\cgi.py", line 583, in keys 
    raise TypeError, "not indexable" 
TypeError: not indexable

來源

2010-08-31 Michael Butler

或者，有沒有一種方法可以將原始POST正文放入App Engine的BlobStore中？ – 2010-08-31 02:04:41

你可能想看看我的博客文章上載至Blobstore（1，2，3），以及this recent cookbook post。

來源

2010-08-31 02:23:25

非常感謝您對此發表了許多看法。看起來我可能是S.運氣不好，因爲使這項工作的部分只適用於Firefox。這是因爲只有Firefox支持直接讀取文件，並且執行多部分編碼，而App Engine目前需要BlobStore。看起來像我必須切換到亞馬遜s3。 – 2010-08-31 02:58:21

在我的文章的後面部分中使用的PLUpload支持多種上傳方法，任何現代瀏覽器都應該支持至少一種。如果沒有其他所有功能，那麼使用動態生成的URL進行常規表單上傳（如在食譜文章中），可以正常工作。 – 2010-08-31 16:07:41

是的，這是一個非常好的圖書館，我可以利用。我意識到我的問題是服務器端問題，而不是客戶端問題。我已經成功地通過瀏覽器，Chrome 5，Safari 4和Firefox 3.6中的拖放和XmlHttpRequests提交二進制文件。如果我使用我自己的PHP服務器，接受二進制數據服務器端並存儲大圖像將沒有問題。但是，從App日期開始，BlobStore只接受帶多部分編碼的表單 - 換句話說，非XmlHttpRequests（除非您使用Firefox） – 2010-08-31 19:10:33

一般認爲，迄今爲止，App Engine的BlobStore上傳API只接受多部分編碼的POST數據...換句話說，HTML輸入類型=文件格式。或者，您可以使用Firefox通過FileReader API讀取用戶的二進制文件（通過拖放操作），並手動重建多部分編碼。然後你可以用XmlHttpRequest異步提交數據。

就編寫而言，Chrome和Safari不支持FileReader對象，因此它們不能分解二進制文件，因此不會異步發送多部分編碼。

請注意，將文件上傳到App Engine的拖放N drop + XmlHttpRequest方法仍然適用於所有3種上述瀏覽器（如果小於1 MB）。

來源

2010-09-02 21:52:49

如何使用XmlHttpRequest 2.0將5 MB文件上傳到App Engine BlobStore？

回答

相關問題