将预签名图像从Angular上传到s3 - 图像不会出现 [英] Uploading presigned image to s3 from Angular - image does not appear

问题描述

我正在使用Angular将图像上传到s3存储桶，使用从我的Laravel服务器收到的预签名网址。

I'm using Angular to upload images to s3 bucket, using a presigned URL received from my Laravel server.

该文件似乎上传正确的内容类型。如果我在Angular上传 PUT 之后点击s3文件到s3，我得到：

The file seems to upload fine with the correct content types. If I click on the s3 file after the Angular upload PUT's to s3, I get:

Object: dog-aromatherapy.jpg

  Bucket:   dderesources
  Name: dog-aromatherapy.jpg
  Link: This is a public link -> https://s3.amazonaws.com/dde.resources/dog-aromatherapy.jpg
  Size: 28660
  Last Modified:    Tue Jun 14 14:51:13 GMT-400 2016
  Owner:    myusername
  ETag: f478788943af2296223a0f45a9c50610
  Expiry Date:  None
  Expiration Rule:  N/A

元数据正确为 image / jpeg ：

但实际文件大小为 27.9kb ，表示标题 28.6kb 的大小预计需要额外的~700b左右... ...

But the actual file size is 27.9kb, meaning the headers size of 28.6kb is expecting an extra ~700b or so that is missing...

当我点击图片查看时，它显示了一个白色的迷你：

When I click on the image to view, it shows a white minibox:

亲自尝试： https://s3.amazonaws.com/dderesources/dog-aromatherapy.jpg

角度上传代码：

var upload_file = function (file, response) {

    var formData = new FormData();

    formData.append('image', file);

    return $http({
        method: 'PUT',
        url: response.signed_request,
        data: formData,
        headers: {
            'Content-Type': file.type
        },
        cache: true
    });
};

为什么会这样？

推荐答案

删除期间。从您的桶名称，并使其成为这样的事情，这将解决问题

Remove the period "." from your bucket name and make it some thing like this this will resolve the issue

dde-resources

dde-resources

作为具有句点。的存储桶名称。在您的代码中使用已重新签名的URL时效果不佳。

As bucket names with a period "." does not go very well when you are using resigned URL's in your code.

并在角度代码中使用以下语句

And use below statement in your angular code

processData: false

这篇关于将预签名图像从Angular上传到s3 - 图像不会出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！