Question

我的软件可以“修饰”图像，然后将生成的画布作为jpeg图像从浏览器发送到S3存储桶。

首先，我使用[https://github.com/blueimp/JavaScript-Canvas-to-Blob][1]获取Image Blob。

myCanvas.toBlob(function(blob){
  uploadFile("myImage.jpg", blob).then(function(){
    $log.log("upload finished");
  });
},"image/jpeg",90);

上传以2种方式执行：使用我的应用服务器对S3请求进行签名，然后上传到S3存储桶（使用角度文件上传[https://github.com/danialfarid/angular-file-upload][1]）

var uploadFile = function(fileName, blob){
  return signRequest(fileName).
    then(function(s3SignData){
      return $upload.upload({
        url: s3SignData.url,
        method: 'PUT',
        data: s3SignData.credentials,
        headers: {"x-amz-acl":s3SignData.credentials.acl},
        file: blob,
        fileName: fileName
      });

    });
  };

上传后，我可以在S3存储桶中找到该文件，但是，当我下载文件我还没有JPEG时，我很惊讶：我有多部分已发送的请求：

------WebKitFormBoundaryBrzMD5YylSAtfLid
Content-Disposition: form-data; name="policy"

eyJleHBpcmF0aW9uIjoiMjAxNS0wNC0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W3siYnVja2V0IjoiZDRsIn0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCJmb2xkZXJzLzU1L2FhM2I3MmYxNjY3ZGM5OGEwOGI2YzVlNTk5Nzk5MTcyLzAwMDAwMF9MYW5kc2NhcGVfN19qcGcuanBnIl0seyJhY2wiOiJwdWJsaWMtcmVhZCJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMjA5NzE1MjBdLFsiZXEiLCIkQ29udGVudC1UeXBlIiwiaW1hZ2UvanBlZyJdXX0=
------WebKitFormBoundaryBrzMD5YylSAtfLid
Content-Disposition: form-data; name="signature"

RHmScYS9OIR/WkNoqBE9kZn6cJQ=
------WebKitFormBoundaryBrzMD5YylSAtfLid
Content-Disposition: form-data; name="AWSAccessKeyId"

ZKSAJQFCLBSJEQJR6ZTQ
------WebKitFormBoundaryBrzMD5YylSAtfLid
Content-Disposition: form-data; name="acl"

public-read
------WebKitFormBoundaryBrzMD5YylSAtfLid
Content-Disposition: form-data; name="key"

aa3b/72f1667dc98a08b6c5e599799172/000000_Landscape_7_jpg.jpg
------WebKitFormBoundaryBrzMD5YylSAtfLid
Content-Disposition: form-data; name="expires"

2015-04-01T12:00:00.000Z
------WebKitFormBoundaryBrzMD5YylSAtfLid
Content-Disposition: form-data; name="content-type"

image/jpeg
------WebKitFormBoundaryBrzMD5YylSAtfLid
Content-Disposition: form-data; name="file"; filename="000000_Landscape_7_jpg.jpg"
Content-Type: image/jpeg

ÿØÿ........
Here all the file content 
.....
------WebKitFormBoundaryBrzMD5YylSAtfLid--

Answer 1

正如michael-sqlbot所提到的，我必须使用POST

此外，网址必须是存储区网址，而不是密钥网址：参数密钥用于了解将文件放入存储区的位置。

示例代码：

var uploadFile = function(fileName, blob){
  return signRequest(fileName).
    then(function(s3SignData){
      return $upload.upload({
        url: s3SignData.postURL,
        method: 'POST',
        data: s3SignData.postData,
        file: blob,
        fileName: fileName
      });

    });
  };

其中：

s3SignData.postURL ===“ mybucket.s3.amazonaws.com ”
s3SignData.postData 包含所有邮件参数：“policy”，“signature”，“AWSAccessKeyId”，“acl”，“key”，“content-type”

将JPEG blob发送到S3：存储的文件是完整的多部分请求，而不是JPEG

1 个答案: