javascript - 如何使用 Cordova FileTransfer 将文件上传到 Amazon S3？

Question

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

这是他们的功能:

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，因为我没有从相机插件中获得 File 对象，而只有文件 URI，所以我使用了 Cordova 的 FileTransfer使用 multipart/form-data 将图片上传到我的 Node.js 应用程序，它运行良好。

但是，我无法让它适用于 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，但是成功和错误回调都没有被调用。

那么，有没有办法使用 FileTransfer 将文件上传到 S3？我真的需要签名的请求吗？还是仅当我使用 XHR 时才需要？

感谢任何提示。

Answer 1

我在 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 header，这样multipart/form-data 就不会被使用，并且chunkedMode = false 使用单个请求发送文件。

编辑:删除了对插件代码的更改，这些更改在事后看来是无用的(过时的插件)。