Question

好的，在这款手机应用程序中，我从设备相机的巨大图像文件开始。
然后我降低分辨率并允许用户使用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（＆＃34; #file＆＃34;）。attr（＆＃39; value＆＃39;，blobData）; //将字符串[object Blob]文本插入字段并将其发送到S3，这不是很有用

我也尝试过：

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

//无效; S3然后抱怨它正在期待一个文件，并没有得到一个。

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

Answer 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

1 个答案: