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

Posted 2023-03-03

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

【英文标题】：Cordova/Ionic app uploading base64 image to S3 via server signed url

【发布时间】：2016-05-17 02:51:19

【问题描述】：

我似乎无法将照片上传到 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>

【参考方案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;
  )();

【参考方案2】：

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

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

【讨论】：

我不这么认为。实际上，最后一步给我留下了一个包含标题的变量（canvas.toDataUrl（“image/jpeg”，0.6）。但即使我去掉标题，我也会得到一个错误。错误代码1与另一个错误代码相对应代码 3。不知道它们是什么。

是否调用了 S3 API？你有没有像docs.aws.amazon.com/AmazonS3/latest/API/ErrorResponses.html那样得到任何可读的错误代码？

【参考方案3】：

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

【讨论】：

我把标题放在那里是为了让你知道标题确实设置正确。我确实在使用 toDataURL。自从发布这个问题以来，我已经放弃了这种方法。现在我正在使用 Cognito 并使用通过 Cognito 获得的特殊身份直接上传到 S3。我应该如何处理问题和赏金？

留下问题，编辑它，写下并更新你解决问题的方法。您可以提供部分赏金。很高兴它被排序））