kinvey rest api 上传 [英] kinvey rest api upload

问题描述

我正在尝试使用 REST API 方法在 Kinvey 上上传.

在向 https:/发送POST"请求后，我可以成功获取提供的 google 存储 URL 链接/baas.kinvey.com/blob/:myAppId

问题是当我向 google 存储 URL 发送PUT"请求时，我收到此错误:

<块引用>

XMLHttpRequest 无法加载(我的 storage.google URL).响应预检请求未通过访问控制检查:否请求中存在Access-Control-Allow-Origin"标头资源.因此不允许访问 Origin(我的本地主机).

解决方案

这似乎是一个相当标准的 CORS 错误(您可以在此处阅读更多相关信息:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS ) ，这需要在您提出跨​​域请求时放置.有很多不同的方法可以解决这个问题，但最简单的方法可能是使用我们的 SDK 之一来帮助您.如果你看看 http://devcenter.kinvey.com/html5/downloads 你将在顶部导航中找到您可以包含在您的项目中的 SDK 和指南/文档.

使用 HTML5 库上传文件也相当简单.这是我编写的一些示例代码:

HTML 部分:

Javascript 部分:

function fileSelected(){var oFile = document.getElementById('_file').files[0];var oReader = new FileReader();oReader.onload = 函数(e){document.getElementById('fileinfo').style.display = 'block';document.getElementById('filename').innerHTML = 'Name:' + oFile.name;document.getElementById('filetype').innerHTML = 'Type:' + oFile.type;};oReader.readAsDataURL(oFile);文件上传(oFile)；}函数文件上传(文件){var file = document.getElementById('_file').files[0];var promise = Kinvey.File.upload(file,{文件名:document.getElementById('fileinfo').toString(),mimetype: document.getElementById('filetype').toString()})承诺.然后(功能(){alert("文件上传成功");}, 函数(错误){alert("文件上传失败:" + 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 https://baas.kinvey.com/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: https://developer.mozilla.org/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 http://devcenter.kinvey.com/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,

这篇关于kinvey rest api 上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！