将 base64 图像数据上传到 Amazon S3

Posted

技术标签:

【中文标题】将 base64 图像数据上传到 Amazon S3【英文标题】:upload base64 image data to Amazon S3 【发布时间】:2014-06-26 19:03:53 【问题描述】:

好的,在这个 phonegap 应用中,我从设备相机中的一个巨大的图像文件开始。 然后我降低分辨率并允许用户使用javascript画布和一些非常酷的代码darkroomJS来裁剪它。 最后,darkroomJS 使用 toDataURL() 方法从画布中获取 base64 数据。

现在我需要将它上传到 Amazon S3。

我可以使用表单将文件从我的计算机上传到 S3。我正在处理的是发送 base64 数据。

我还有一个将 base64 数据转换为 blob 的函数。 (我已经阅读过,但我对其他想法持开放态度)。

 <form action="https://mybucketname.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
      <input type="" id="key" name="key" value="uploads/$filename">
      <input type="" id="AWSAccessKeyId" name="AWSAccessKeyId" value="YOUR_AWS_ACCESS_KEY"> 
      <input type="" id="acl" name="acl" value="private"> 
      <!-- <input type="" id="success_action_redirect" name="success_action_redirect" value="http://localhost/"> -->
      <input type="" id="policy" name="policy" value="YOUR_POLICY_DOCUMENT_BASE64_ENCODED">
      <input type="" id="signature" name="signature" value="YOUR_CALCULATED_SIGNATURE">
      <input type="" id="Content-Type" name="Content-Type" value="image/jpeg">
<!--       <input id="file" name="file" >  -->
      <br> 
      <input type="submit" value="Upload File to S3"> 
    </form> 

在从我的服务器获取凭据后,我使用 jquery 写入凭据。这部分工作正常。

问题是如何在表单中放置一个 blob?

我尝试了两种方法。 使用 jQuery 设置值。

$page.find("#file").attr('value', blobData); //将字符串[object Blob]文本插入到字段中并发送到S3,不是很有用

我也试过了:

        var fd = new FormData(document.forms[0]);
        fd.append('file', blobData);

//没有效果;然后 S3 抱怨它需要一个文件,但没有得到。

我做错了什么?我怎样才能做到这一点?

【问题讨论】:

【参考方案1】:

好的,得到了​​一些有用的东西:

我猜想在页面上实际呈现表单会迫使浏览器对 blob 进行字符串化。 函数 s3Man.getS3Policy 只是向我的服务器发出 AJAX 请求以获取签名的 s3 策略、密钥等。

this.uploadBase64ImgToS3 = function(base64Data, filename, callback)
    var xmlhttp = new XMLHttpRequest();    
    var blobData = dataURItoBlob(base64Data);
    var contentType = false;
    if (filename.match(/.png/)) var contentType = 'image/png';
    if (filename.match(/.jpg/)) contentType = 'image/jpeg';
    if (!contentType)
        xStat.rec("content type not determined, use suffix .png or .jpg");
        return;
    

    s3Man.getS3Policy(filename, function(s3Pkg)
        console.log("policy:", s3Pkg);
        var fd = new FormData();    
        fd.append('key', s3Pkg.filename);    
        fd.append('acl', 'public-read');    
        fd.append('Content-Type', contentType);    
        fd.append('AWSAccessKeyId', s3Pkg.awsKey);    
        fd.append('policy',  s3Pkg.policy);
        fd.append('signature', s3Pkg.signature);    
        fd.append("file", blobData);
        xmlhttp.open('POST', 'https://swoopuploadspublic.s3.amazonaws.com/', true);    
        xmlhttp.send(fd);
    );

【讨论】:

以上是关于将 base64 图像数据上传到 Amazon S3的主要内容,如果未能解决你的问题,请参考以下文章

如何仅使用 JavaScript 将 base64 编码的图像数据上传到 S3?

如何使用节点 js 将 base64 数据作为图像上传到 s3?

将 base64 字符串保存到 Amazon S3

我可以将 base64 图像添加到 $_FILES 数组吗?

在 laravel 中解码和移动 base64 编码的图像

使用 Alamofire 将图像作为 base64String 上传