如何使用Cordova FileTransfer将文件上传到Amazon S3？ [英] How can I upload files to Amazon S3 using Cordova FileTransfer?

问题描述

我正在直接上传到Amazon S3，关注 Heroku的教程。
从AWS通过Node.js应用程序获得签名请求后，他们使用一个正常 XMLHttpRequest 发送文件。

I'm following Heroku's tutorial on direct uploads to Amazon S3. After getting a signed request from AWS through the Node.js app, they use a "normal" XMLHttpRequest to send the file.

这是他们的功能：

function upload_file(file, signed_request, url){
    var xhr = new XMLHttpRequest();
    xhr.open("PUT", signed_request);
    xhr.setRequestHeader('x-amz-acl', 'public-read');
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById("preview").src = url;
            document.getElementById("avatar_url").value = url;
        }
    };
    xhr.onerror = function() {
        alert("Could not upload file.");
    };
    xhr.send(file);
}

现在，我正在与Cordova合作，来自相机插件的文件对象，但只使用文件URI，我使用Cordova的 FileTransfer 上传图片到我的Node.js应用程序 multipart / form-data 并且工作正常。

Now, I'm working with Cordova and, since I don't get a File object from the camera plugin, but only the file URI, I used Cordova's FileTransfer to upload pictures to my Node.js app with multipart/form-data and it worked fine.

但是，我不能使它适用于Amazon S3。

However, I can't manage to make it work for Amazon S3.

这里是我有：

$scope.uploadPhoto = function () {
    $scope.getSignedRequest(function (signedRequest) {
        if (!signedRequest)
            return;

        var options = new FileUploadOptions();
        options.fileKey = 'file';
        options.httpMethod = 'PUT';
        options.mimeType = 'image/jpeg';
        options.headers = {
            'x-amz-acl': 'public-read'
        };
        options.chunkedMode = false;

        var ft = new FileTransfer();
        ft.upload($scope.photoURI, encodeURI(signedRequest.signed_request), function () {
            // success
        }, function () {
            // error
        }, options);
    });
};

我已经尝试过 chunkedMode = true 和 chunkedMode = false ，但是既不调用成功也不调用错误回调。

I've tried both chunkedMode = true and chunkedMode = false, but neither the success nor the error callback is called.

使用 FileTransfer 将文件上传到S3？
我实际上需要签名的请求，还是只有在使用XHR时才需要？

So, is there a way to upload a file to S3 with FileTransfer? Do I actually need the signed request or is it only necessary if I use XHR?

任何提示都可以使用。

推荐答案

我最终在Cordova中使用这个函数：

I ended up with this function in Cordova:

$scope.uploadPhoto = function () {
    $scope.getSignedRequest(function (signedRequest) {
        if (!signedRequest)
            return;

        var options = new FileUploadOptions();
        options.chunkedMode = false;
        options.httpMethod = 'PUT';
        options.headers = {
            'Content-Type': 'image/jpeg',
            'X-Amz-Acl': 'public-read'
        };

        var ft = new FileTransfer();
        ft.upload($scope.photoURI, signedRequest.signedUrl, function () {
            $scope.$apply(function () {
                // success
            });
        }, function () {
            $scope.$apply(function () {
                // failure
            });
        }, options);
    });
};

重要的一点是设置 Content-Type 头，因此 multipart / form-data 不会被使用，而 chunkedMode = false

The important bits are setting the Content-Type header, so that multipart/form-data won't be used, and chunkedMode = false to send the file with a single request.

编辑：删除对插件代码的更改，后者是无用的（过时的插件）。

Removed changes to the plugin code which were, in hindsight, useless (outdated plugin).

这篇关于如何使用Cordova FileTransfer将文件上传到Amazon S3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！