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

我正在尝试上传使用拍摄的图像

Webcam js

直接到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存储桶URL”.所请求的资源上没有“ Access-Control-Allow-Origin”标头.因此,不允许访问来源“我的本地域”.

我已经在亚马逊存储桶中添加了CORS信息.
我已经在使用plupload将图像上传到该存储桶.
我还上传了不使用Ajax的标准图像.
我似乎无法使它正常工作.

有任何想法吗？
谢谢

PS：我也尝试过使用

jquery webcam plugin

结果相同

解决方法:

您需要使用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);

标签：ajax,amazon-s3,webcam,javascript,jquery
来源： https://codeday.me/bug/20191121/2055657.html