如何使用 Angular $http PUT 将文件上传到 AWS-S3

Question

在我的 Angular 应用程序中，我尝试使用 $http.put(url, file).

将文件上传到 AWS-S3

但是它不起作用，我收到一个 HTTP-403 Forbidden 告诉我计算出的签名 s3 与我提供的不同但是如果我用 curl -X PUT -T file url 这样的 curl 发出相同的请求那么一切正常文件被上传。所以要么 $http.put 的工作方式不好（对于这个任务），要么 curl 有一些魔力。谁能详细说一下？

Answer 1

仅供参考：

我找不到为什么 $http 不起作用..甚至我根据这个主题发现了奇怪的东西。

所以首先我 "fetched" 来自 html 的文件是这样的：

<input flex="40" type="file" onchange="angular.element(this).scope().$parent.selectAttachment(this)">

因为我不想为此测试目的创建一个指令。 selectAttachment 函数只是将文件设置为我的控制器的属性。

然后看起来没问题，我可以读取例如 this.attachment.name 或 this.attachment.size，但是当我写 $http.put(url, this.attachment) 时出现签名不匹配错误。

然后我尝试了与本教程中相同的 XHR：https://devcenter.heroku.com/articles/s3-upload-node

从来没有幸运...

然后，作为最后的手段，我尝试通过不通过 angular 设置但 const file = document.getElementById('report-attachment').files[0]; 来获取文件最后它对我有用。有趣的是，使用 getElementById 获取文件并使用 $http 仍然无效，我试过的第 1 个或第 2 个第 3 方 angular 上传器都没有，只有 XHR o.o

最后的 "solution" 对我有用：

HTML:

<input flex="40" id="report-attachment" type="file">

JS:

            const file = document.getElementById('report-attachment').files[0];
            const url = r && r.data;
            const xhr = new XMLHttpRequest();
            xhr.open('PUT', url);
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        console.debug('success');
                    } else {
                        console.error('error');
                    }
                }
            };
            xhr.send(file);

Answer 2

使用$http服务上传文件时，设置Content-Type: undefined很重要。

  var config = { headers: {
                   "Content-Type": undefined,
                  }
               };

  var promise = $http.put(url, file, config);

$http 服务的默认内容类型是 application/json。通过设置 Content-Type: undefined，$http 服务省略 Content-Type header 并且 XHR API 将 Content-Type header 设置为文件的 Content-Type header。

如何使用 Angular $http PUT 将文件上传到 AWS-S3

How to upload files to AWS-S3 with Angular $http PUT

javascript

amazon-s3

amazon-web-services

angularjs

angularjs-http