Cordova/Ionic 应用程序通过服务器签名的 url 将 base64 图像上传到 S3

Question

我似乎无法将照片上传到 S3。在网上看了很多资源，我似乎无法找到明确的答案。这是我到目前为止所拥有的。我总是收到错误代码：3 作为我的失败消息。

客户端：

$scope.uploadTopicPhoto = function(imageData) {
    var image2save = "data:image/jpeg;base64," + imageData;
    $http({
      url: 'http://api.example.io/signS3upload', 
      method: "GET"
     }).then(function (success) {
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = success.data.key
        options.mimeType = "image/jpeg";    
        options.chunkedMode = false;
        options.httpMethod = 'PUT';

        function win(r) {
            console.log("Code = " + r.responseCode);
        }

        function fail(error) {
            alert("An error has occurred: Code = " + error.code);
        }

        var uri = encodeURI(success.data.signed_request);

        var ft = new FileTransfer();
        ft.upload(image2save, uri, win, fail, options);
     });
}

服务器端：

var s3 = new aws.S3();
    var bucketName = 'testimages';
    var s3_params = {
        Bucket: bucketName,
        Key: uuid.v4() + '.jpg',
        Expires: 60,
        ContentEncoding: 'base64',
        ContentType: 'image/jpeg',
        ACL: 'public-read'
    };

    s3.getSignedUrl('putObject', s3_params, function(err, data){
        if (err) {
            console.log(err);
        } else {
        var return_data = {
            signed_request: data,
            key: s3_params.Key
        };
        res.json(return_data);
        }
});

CORS：

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Answer 1

它对我有用，我将图像文件发送到 REST API，API 将图像上传到 s3 存储桶中，凭据从其他文件获取[保存凭据]。

(function() {
function execute(rqst, q, fwk) {
    console.log('called api')
    var uploadedFile = rqst.files['image'];
    console.log(rqst.files['image']);
    var newId = fwk.uuid.v4();
    console.log('.........', rqst);
    if (rqst.body.data) {
        var image_type = rqst.body.data;
    } else {
        var image_type = rqst.body.image_type;
    }
    console.log('type', image_type, newId);
    if (image_type && uploadedFile) {
        if (!uploadedFile.extension) {
            uploadedFile.extension = "png";
            console.log('not ex');
        }
        var newPath = "images/food-images" + "/" + newId + '.' + uploadedFile.extension;
        fwk.getAwsS3Client(function(err, awsS3Client) {
            var params = {
                localFile: uploadedFile.path,
                s3Params: {
                    Bucket: fwk.config.awsS3.bucketName,
                    Key: newPath,
                },
            };
            var uploader = awsS3Client.uploadFile(params);
            uploader.on('error', function(err) {
                console.error('Unable to upload' + image_type + 'photo:' + err.toString());
                q.resolve({
                    status: 200,
                    data: {
                        code: 1,
                        error_message: 'Unable to upload' + image_type + 'photo.'
                    }
                });
            });
            uploader.on('progress', function() {
                console.log(uploader.progressAmount);
            });
            uploader.on('end', function() {
                console.log("upload" + image_type + "photo done.");
                fwk.getAwsS3PublicUrl(newPath, function(err, publicUrl) {
                    if (err) {
                        console.error('Error getting public url: ' + err.toString());
                        q.resolve({
                            status: 200,
                            data: {
                                code: 1,
                                error_message: 'Error getting public url.'
                            }
                        });
                    } else {
                        // console.log('ho gya upload',newPath,publicUrl)
                        q.resolve({
                            status: 200,
                            data: {
                                code: 0,
                                photo_url: newPath,
                                public_photo_url: publicUrl
                            }
                        });
                    }
                })
            });
        });
    } else {
        console.error('Error key parameter missing');
        q.resolve({
            status: 200,
            data: {
                code: 1,
                error_message: 'Error Missing required key in params.'
            }
        });
    }
}
exports.execute = execute;
  })();

Answer 2

我认为您不需要在 base64 图像数据前包含 data:image/jpeg;base64,。只需删除该部分并直接将您的 base64 数据作为请求正文上传即可。

请参阅：https://stackoverflow.com/a/7548264/3427434 和 http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPUT.html#RESTObjectPUT-requests。

Answer 3

如果您使用canvas.toDataURL，则不需要data:image/jpeg;base64，它由函数生成。如果您使用的是btoa，则需要添加data:image/jpeg;base64 标头。