无法使用带有预签名URL的Angularjs将文件上传到AmazonS3

Question

我上传一个文件到AmazonS3有问题。我开发了一个Grails RESTful服务，它使用AWS Java SDK生成预签名URL。当客户端上传一个文件时，它首先检索一个预签名的URL，然后使用这个将文件直接上传到我的S3 bucket。所以我有一个Grails服务，它创建了一个预签名的URL，如下所示...

def generateFileUploadUrl(AmazonS3Client client, String bucketName, String key, int expiryMins) {
    GeneratePresignedUrlRequest req = new GeneratePresignedUrlRequest(bucketName, key);
    req.setMethod(HttpMethod.POST);
    req.setExpiration(getExpiration(expiryMins)); 
    return client.generatePresignedUrl(req);
}

https://{bucketname}.amazonaws.com/{key}?AWSAccessKeyId={accesskey}&Expires={expiry}&Signature={signature}

Upload.upload({
    url: destUrl, // url shown above
    file: file
}).progress(function (evt) {
  var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
  console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
}).success(function (data, status, headers, config) {
  console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
}).error(function (data, status, headers, config) {
  console.log('error status: ' + status);
});

Answer 1

我知道这是一个老问题，但它似乎仍然是相关的，仍然似乎相当棘手的工作。S3签名的URL上载对请求和响应中使用的字段非常讲究，并且错误消息没有太大帮助，正如您所看到的--我认为这是出于安全原因的意图，但这确实使其难以调试。

AWS签名过程也发生了变化--此时（2016年3月）的版本是AWS签名版本4（http://docs.AWS.amazon.com/general/latest/gr/signature-version-4.html)。在查看示例和Stackoverflow等信息时需要小心，因为它们与您正在使用的相同签名版本有关，因为它们不能很好地混合在一起。

我开始使用AWS SDK上传Angular/Node文件，但最终发现在服务器（node.js）端生成策略更容易，而不使用SDK。这里有一个很好的例子（虽然是节点，不是基于Grails的）:https://github.com/danialfarid/ng-file-upload/wiki/direct-S3-upload-and-node-signing-example（但注意这里S3桶名的问题：AngularJs Image upload to S3)。

需要注意的一个关键事项是，您正确地将文件内容类型包含在策略生成中，并且该内容类型与您实际上载的文件的内容类型适当匹配。

这里是angular侧的代码，我使用它：

$scope.upload = function (file) {
    console.log("WebUploadCtrl upload");
    console.log("WebUploadCtrl sending S3sign request");
    var query = {
        filename: file.name,
        type: file.type
    };
    $http.post('/api/s3sign', query).success(function(response) {
        console.log("WebUploadCtrl s3sign response received");
        var s3ResponseParams = response;
        console.log("WebUploadCtrl upload  AWSAccessKeyId: " + response.AWSAccessKeyId);
        console.log("WebUploadCtrl upload  signature: " + response.Signature);
        $scope.upload = Upload.upload({
                url: s3ResponseParams.url, //s3Url
                transformRequest: function(data, headersGetter) {
                    var headers = headersGetter();
                    delete headers.Authorization;
                    return data;
                },
                fields: s3ResponseParams.fields, //credentials
                method: 'POST',
                file: file
            }).progress(function(evt) {
                $scope.progressPerCent = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + $scope.progressPerCent);
            }).success(function(data, status, headers, config) {
                // file is uploaded successfully
                console.log('file ' + config.file.name + 'is uploaded successfully. Response: ' + data);                

            }).error(function() {
                // Some error has occured
                console.log('Error uploading to S3');
          });
    });
};