使用Intel XDK将图像从PhoneGap上载到Azure Blob存储

Upload image from PhoneGap to Azure Blob Storage using Intel XDK

本文关键字：上载 Azure Blob 存储 PhoneGap Intel XDK 图像 使用      更新时间：2023-09-26

我正在使用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，有什么建议吗？

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

这只能在实际设备上工作，无论是使用应用程序预览还是实际构建的应用程序，都不能在英特尔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>

（我刚刚测试了这个代码，用我用谷歌应用程序引擎blob存储设置的服务器，我用这个代码在应用程序引擎上设置服务器：在谷歌应用程序发动机中上传文件，如果你把你的实际azure url发给我上传，我也可以测试它）

相关文章：