Question

我正在尝试上传使用

拍摄的图像

直接访问Amazon S3

var dataUri = Webcam.snap();
var raw = window.atob(dataUri.replace(/^data\:image\/\w+\;base64\,/, ''));

在我得到政策（这是正确的）后，我这样做

$.ajax({
        type: 'POST',
        url: amazonUploadUrl,                                
        data: {
              file: raw,
              contentType: "image/jpeg",
              key: key,
              AWSAccessKeyId: awsAccessKey,
              acl: "public-read",
              policy: policy,
              signature: signature,
              name: "",
              Filename: filename
              },
              dataType: "",
              success: function (r1) {

              }
        });

我已经尝试过发送编码图像，解码后的图片，我试过修改标题。我一直得到的就是这个

XMLHttpRequest无法加载'amazon s3 bucket url'。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问“我的本地域名”。

我在亚马逊桶上添加了CORS信息。我已经使用plupload将图像上传到该存储桶了。我还没有使用ajax从标准上传图像。我似乎无法让它发挥作用。

有什么想法吗？感谢

PS：我也尝试过使用

jquery webcam plugin

结果相同

Answer 1

您需要使用javascript FormData对象和本地XMLHttpRequest方法将数据直接发布到s3。我今天早上尝试使用jQuery做同样的事情并遇到了错误消息，但原生的javascript API工作。

我觉得jQuery默认情况下不使用CORS，或者在某个地方发送错误的标题。

This answer shows how to convert to a format S3 can understand，在您的情况下可能没有必要。

这可以让您开始使用表单数据部分：

var fd = new FormData();
fd.append("contentType", "image/jpeg");
fd.append("key", key);
fd.append("AWSAccessKeyId", awsAccessKey);
fd.append("acl", "public-read");
fd.append("policy", policy);
fd.append("signature", signature);    
fd.append('filename', "");
fd.append('file', raw);

var xhr = new XMLHttpRequest();
xhr.open('POST', amazonUploadUrl);

xhr.addEventListener('load', function(e) {
    console.log('uploaded!', e)  // Successful upload!
});

// Optionally bind to other xhr events, like error, progress, or abort.
// Using native XHR2 is nice because the progress event works and you
// can tack on upload progress counters.
xhr.send(fd);

网络摄像头js将图像上传到Amazon S3

1 个答案: