將base64圖像數據上傳到亞馬遜S3

好吧，在這個phonegap應用程序中，我從設備相機的一個巨大的圖像文件開始。
然後，我降低分辨率，並允許用戶使用javascript canvas和一些非常酷的代碼darkroomJS對其進行裁剪。最後，darkroomJS使用toDataURL（）方法從畫布中獲取base64數據。將base64圖像數據上傳到亞馬遜S3

現在我需要將其上傳到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設置值。（'＃file'）。attr（'value'，blobData）;}};}}。 //插入字符串[對象的Blob]文本到字段和船舶它到S3，而不是非常有用

也我試着：

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

//沒有影響; S3然後抱怨說它正在等待一個文件，並沒有得到一個。

我在做什麼錯？我該如何做這項工作？

來源

2014-05-09 zstew

好了，有一些作品：

我猜有實際在網頁上呈現的形式有點強制瀏覽器字符串化斑。
功能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); 
    }); 
}

來源

2014-05-09 18:02:45 zstew

將base64圖像數據上傳到亞馬遜S3

回答

相關問題