2

我正在使用 PhoneGap 和 Intel 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 的任何建议？

4

1 回答 1

1

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

这仅适用于使用 App Preview 或实际构建的应用程序的真实设备，在 Intel 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>

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

于 2014-04-17T17:23:51.103 回答