kinvey REST API上传

本文介绍了kinvey REST API上传的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图使用REST API方法上Kinvey上传

我能顺利拿到发送POST请求 HTTPS后所提供的谷歌存储网址链接：/ /baas.kinvey/blob/:myAppId

问题是，当我送一个'把'请求发送到谷歌存储网址，我得到这个错误：

  

XMLHtt prequest无法加载（我storage.google URL）。响应  preflight请求不通过访问控制检查：无  访问控制允许来源标头present的要求  资源。因此，原产地（我的本地主机）是不允许访问。

解决方案

这似乎是一个相当标准的CORS错误（你可以阅读了很多关于在这里：​​的 developer.mozilla/en-US/docs/Web/HTTP/Access_control_CORS ），这需要当你正在一个跨域请求放置。有很多，你可以处理这个问题的方式不同，但最简单的很可能是使用我们的SDK的的人帮你。如果你把在 devcenter.kinvey/html5/downloads一个过目你会发现一个SDK，你可以在您的项目和导游/文档，它在顶部导航。

文件上传使用HTML5库是相当琐碎的为好。下面是我已经掀起了一些样本code：

HTML部分：

＆LT;输入类型=文件名称=_文件ID =_文件的onchange =fileSelected（）; /＆GT;        ＆LT; D​​IV ID =FileInfo的＆GT;            ＆LT; D​​IV ID =文件名＆GT;＆LT; / DIV＆GT;            ＆LT; D​​IV ID =文件类型＆GT;＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;

JavaScript部分，

函数fileSelected（）{    。VAR OFILE =的document.getElementById（'_文件）文件[0];    VAR oReader =新的FileReader（）;    oReader.onload =功能（E）{        。的document.getElementById（'FileInfo的'）的style.display =块;        。的document.getElementById（'名'）的innerHTML =姓名：+ oFile.name;        。的document.getElementById（文件类型）的innerHTML ='类型：'+ oFile.type;    };    oReader.readAsDataURL（OFILE）;    文件上传（OFILE）;}功能文件上传（文件）{    。var文件=的document.getElementById（'_文件）文件[0];    VAR承诺= Kinvey.File.upload（文件，{        文件名：的document.getElementById（'FileInfo的'）的toString（）        MIME类型：的document.getElementById（'文件类型'）的toString（）    }）    promise.then（函数（）{        警报（文件上传成功）;    }，功能（错误）{        警报（文件上传失败：+ error.description）;    }）;}

这将是每个Kinvey的JavaScript库略有不同，但大致应该遵循相同的轮廓。获取文件，异步调用Kinvey.File.Upload，并让SDK做它的魔力。这应该处理CORS的所有丑陋适合你。

谢谢，

I'm trying to upload on Kinvey using REST API method.

I can successfully get the google storage URL link provided after sending a 'POST' request to baas.kinvey/blob/:myAppId

The problem is when I'm sending a 'PUT' request to the google storage URL, I'm getting this error:

XMLHttpRequest cannot load (my storage.google URL). Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin (my localhost) is therefore not allowed access.

解决方案

This appears to be a fairly standard CORS error (which you can read a LOT more about over here: developer.mozilla/en-US/docs/Web/HTTP/Access_control_CORS ) , which takes place when you are making a cross-origin request. There's a lot of different ways that you can approach this issue, but the easiest would probably be to use one of our SDK's to help you. If you take a look over at devcenter.kinvey/html5/downloads you will find an SDK that you can include in your projects and guides / documentation for it in the top navigation.

File uploads using the HTML5 library are fairly trivial as well. Here's some sample code that I have whipped up:

HTML portion:

<input type="file" name="_file" id="_file" onchange="fileSelected();" /> <div id="fileinfo"> <div id="filename"></div> <div id="filetype"></div> </div>

Javascript portion:

function fileSelected(){ var oFile = document.getElementById('_file').files[0]; var oReader = new FileReader(); oReader.onload = function(e) { document.getElementById('fileinfo').style.display = 'block'; document.getElementById('filename').innerHTML = 'Name: ' + oFile.name; document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type; }; oReader.readAsDataURL(oFile); fileUpload(oFile); } function fileUpload(file) { var file = document.getElementById('_file').files[0]; var promise = Kinvey.File.upload(file,{ filename: document.getElementById('fileinfo').toString(), mimetype: document.getElementById('filetype').toString() }) promise.then(function() { alert("File Uploaded Successfully"); }, function(error){ alert("File Upload Failure: " + error.description); }); }

This will be slightly different for each of Kinvey's Javascript libraries, but should follow roughly the same outline. Get file, call Kinvey.File.Upload asynchronously, and let the SDK do it's magic. This should handle all the ugliness of CORS for you.

Thanks,