如何使用 Cordova FileTransfer 将文件上传到 Amazon S3?

2023-12-07

我正在跟进Heroku 的教程直接上传到 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);
}

现在,我正在与科尔多瓦合作,因为我没有得到File来自相机插件的对象,但只有文件 URI,我使用了 Cordova 的FileTransfer将图片上传到我的 Node.js 应用程序multipart/form-data效果很好。

但是,我无法使其适用于 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 and chunkedMode = false,但是成功回调和错误回调都没有被调用。

那么,有没有办法将文件上传到S3FileTransfer? 我实际上需要签名的请求还是仅在使用 XHR 时才需要?

任何提示表示赞赏。


我最终在科尔多瓦得到了这个函数:

$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通过单个请求发送文件。

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Cordova FileTransfer 将文件上传到 Amazon S3? 的相关文章

随机推荐