上传的base64图像数据到Amazon S3 [英] upload base64 image data to Amazon S3

问题描述

好吧，在这PhoneGap的应用程序，我开始从设备的摄像头巨大的图像文件。
然后，我降低分辨率，并允许用户使用JavaScript帆布和一些非常酷的code称为darkroomJS来裁剪。 在结束darkroomJS使用toDataURL（）方法来获取Base64编码数据出了画布。

Alright, in this phonegap app I start with a huge image file from the device's camera.
Then I reduce the resolution and allow the user to crop it using javascript canvas and some very cool code called darkroomJS. At the end darkroomJS uses toDataURL() method to get base64 data out of the canvas.

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

Now I need to upload it to Amazon S3.

我可以从我的计算机到S3采用的形式就好了上传文件。什么我工作是发送Base64编码数据。

I can upload a file from my computer to S3 using a form just fine. What I'm working on is sending the base64 data.

我也有一个功能，Base64编码数据转换成二进制大对象。 （这是我读过的将是必需的，但我开到其他的想法）。

I also have a function that converts the base64 data into a blob. (which I've read will be required, but I'm open to other ideas).

 <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他们从我的服务器后获得。这部分工作正常。

I write in the credentials using jquery after they are obtained from my server. That part works fine.

麻烦的是我怎么把一个blob的形式？

The trouble is how do I put a blob in the form?

我试过两种方法。 设置与jQuery的价值。

I've tried two methods. Setting the value with jQuery.

$ page.find（＃文件）ATTR（'值'，blobData）。 //将字符串[对象斑点]文本到现场和船舶到S3，作用不大。

$page.find("#file").attr('value', blobData); //inserts the string [object Blob] text into the field and ships it to S3, not very useful

也是我试过：

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

//没有影响; S3则抱怨说，它期待的文件，并没有得到一个。

//has no effect; S3 then complains that it was expecting a file, and didn't get one.

我是什么做错了吗？我怎样才能使这项工作？

What am I doing wrong? How can I make this work?

推荐答案

好了，有一些作品：

我猜有在页面上实际呈现的形式有点强制浏览器字符串化的斑点。
该功能s3Man.getS3Policy只是让一个Ajax请求我SEVER得到一个签名的S3政策，钥匙等。

I guess having the form actually rendered on the page kinda forces the browser to stringify the blob.
The function s3Man.getS3Policy just makes a AJAX request to my sever to get a signed s3 policy, keys, etc.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！