使用 Intel XDK 从 PhoneGap 将图像上传到 Azure Blob 存储答案

【问题标题】：Upload image from PhoneGap to Azure Blob Storage using Intel XDK使用 Intel XDK 从 PhoneGap 将图像上传到 Azure Blob 存储
【发布时间】：2014-05-27 00:48:46
【问题描述】：

我正在使用 PhoneGap 和英特尔 XDK 创建一个跨平台应用程序。我不知道如何将图像从相机上传到我的 Azure Blob 存储。我正在生成我的 SAS 没有问题。当我尝试上传图像本身时，问题就来了。我有一个指向要上传的图像 (localhost) 的 URL。我首先尝试使用 XDK 提供的文件上传工具，如下所示：

intel.xdk.file.uploadToServer(imageUrl, 
   azureUrl + info.resourceName + '?' + info.sasQueryString, 
   "", 
   "image/jpeg", 
   "updateUploadProgress");

这将启动上传进度（看起来），并且 updateUploadProgress 将触发一次。如果我降低图像质量并只拍一张黑色的照片（可能的最小尺寸），它会达到 100%（否则它会达到更小的百分比），但什么也没有。我注册完成的事件不会触发，我在调试中没有看到任何错误。我的假设是它与 blob 类型有关，或者它使用的是 POST 而不是 PUT。

接下来我尝试使用直接的 XMLHttpRequest。经过一些配置后，我可以让它上传画布对象的输出，如下所示：

var canvas = document.createElement("canvas");
var imageObj = document.createElement('img');

imageObj.src = imageUrl;

canvas.width = imageObj.width;
canvas.height = imageObj.height;
var context = canvas.getContext('2d');
context.drawImage(imageObj, 0, 0);

xhr.send(canvas.toDataURL("image/jpeg").split(',')[1]);

那里的问题是它会上传大约正确大小的文件，但它已损坏。此方法在 iPhone 应用程序上也根本不起作用，只是模拟器。我相信使用 XDK 直接调用 XMLHttpRequest 可能会出现问题。

关于如何将此文件上传到 Azure 的任何建议？

【问题讨论】：

标签： javascript azure cordova intel-xdk

【解决方案1】：

这是适用于上传的工作示例代码，将 url 替换为您的上传服务器路径，如果上传服务器设置为正确处理，那么它将起作用：

这仅适用于真实设备，无论是使用 App Preview 还是实际构建的应用程序，在英特尔 XDK 仿真器中均无效。

<html>
<head>
    <title>intel.xdk.file.uploadToServer</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />  
    <script src="intelxdk.js"></script>
    <script src="xhr.js"></script>
    <script>
function upload(){        
    var url=intel.xdk.webRoot + "somefile.txt";

    intel.xdk.file.uploadToServer(url, "http://www.yourserver.com/upload-handler", "", "text/html", "updateUploadProgress");


    function updateUploadProgress(bytesSent,totalBytes)
    {
       if(totalBytes>0)
            currentProgress=(bytesSent/totalBytes)*100;
       document.getElementById("progress").innerHTML=currentProgress+"%";
    }

    document.addEventListener("intel.xdk.file.upload.busy",uploadBusy);
    document.addEventListener("intel.xdk.file.upload",uploadComplete);
    document.addEventListener("intel.xdk.file.upload.cancel",uploadCancelled);

    function uploadBusy(evt)
    {
       alert("Sorry, a file is already being uploaded");
    }

    function uploadComplete(evt)
    {
       if(evt.success==true)
       {
          alert("File "+evt.localURL+" was uploaded");
       }
       else {
          alert("Error uploading file "+evt.message);
       }
    }

    function uploadCancelled(evt)
    {
        alert("File upload was cancelled "+evt.localURL);
    }   
}    
    </script>
<style>
    body {font-family:arial;background-color:white}
</style>    
</head>
<body>         
    <h3>Upload</h3>
    <button onclick="upload()">upload</button>
    <div id="progress"></div>
</body>
</html>

（我刚刚测试了这段代码，使用我使用谷歌 app_engine blob 商店设置的服务器，我使用以下代码在 app_engine 上设置服务器：Upload files in Google App Engine，如果您将您的实际 azure url 发送给我进行上传，我也可以测试它)

【讨论】：

感谢您的帮助。对此，我真的非常感激。不幸的是，这不适用于 Azure。我是从相机上传的，所以我有图片的完整网址。但是，服务器的 URL 看起来像 storagename.blob.core.windows.net/container/img101.jpg?{SAS 信息}。当我使用您的代码执行此操作时，它会触发一次 updateUploadProgress 方法然后停止。我认为问题是 HTTP PUT，需要为上传设置等效的 xhr.setRequestHeader("x-ms-blob-type", "BlockBlob")。
处理上传到 azure 的 URL 是什么？
以上是 URL（我的存储名称和容器名称已编辑）。您无需转到处理文件的网页，而是使用上述格式将其发送给“自身”。我已经在 Fiddler 中对其进行了测试，如果我使用 PUT，它就可以工作。
可以做一个url的console.log，让我知道url，这样我就可以看到实际的url是什么
上传链接仅在五分钟内有效（这是 SAS 信息的一部分），但这是几分钟前有效的链接：ht tps://shopsmartapp.blob.core.windows .net/purchaseaadvice/photo-06.jpg?se=2014-04-17T22%3A12%3A23Z&sr=b&sp=w&sig=i4aHcoJSYM1DldoPDhHw4myW%2BwF052cpMBx4QLbLqVs%3D （在https中间添加了一个空格使其不是链接）