上传到amazon s3的图片在浏览器不显示，而是下载

admin管理员组

文章数量:1642332

通过boto3把图片上传到s3上以后，图片不在浏览器显示，而是下载

问题解决很简单，重要的是解决思路

遇到问题一定要理智分析问题原因，找到根本原因，问题自然就解决了

1、先用curl 看一下这个图片的头是啥
说来惭愧，竟然不知道怎么拿到这个图片链接的header
在浏览器上输入链接，F12，勾选上Preserve log，然后访问此链接

这时在控制台就能看到请求了，然后把curl拿下了
在终端执行curl 命令

 curl 'http://xxxxxxxxxx.log' -H 'Connection: keep-alive' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache' -H 'Upgrade-Insecure-Requests: 1' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3' -H 'Accept-Encoding: gzip, deflate' -H 'Accept-Language: zh-CN,zh;q=0.9,en;q=0.8' -H 'Cookie: csrftoken=9HTnAyzu7nDOukolc8u1ufoD9GJdV7e1DAI6KkFUmETYe3IMAjFfj996YdryBy0T' --compressed **-k -v >/dev/null**

添加 -k -v 参数
>/dev/null是把下载结果丢掉

可以看到返回结果

< HTTP/1.1 200 OK
< Server: nginx/1.12.2
< Date: Sat, 20 Jul 2019 02:03:18 GMT
< Content-Type: application/octet-stream
< Content-Length: 14617
< Connection: keep-alive
< Last-Modified: Fri, 19 Jul 2019 15:37:36 GMT
< ETag: “5d31e3c0-3919”
< Accept-Ranges: bytes
<
{ [data not shown]

重点就是Content-Type，Content-Type是octet-stream，浏览器就会执行下载

2、解决问题
上传图片的时候指定Content-Type为 text/plain image/jpeg image/png浏览器都会显示而不下载，
因为图片有不同的样式，为了方便就都把Content-Type统一为image/jpeg，浏览器是不会只根据Content-Type的值去处理的，只是作为参考，浏览器会识别出正确格式而正确显示。
只不过我们设置成image/jpeg更贴边。

3、处理老图片
安装aws客户端
参考 https://docs.aws.amazon/zh_cn/cli/latest/userguide/cli-chap-install.html#post-install-configure

pip install awscli --upgrade --user

配置基本信息

$aws configure

$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE AWS
Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-west-2
Default output format [None]:json

执行命令把bucket下的所有内容变成image/jpeg格式

aws s3 cp s3://bucket_name/ s3://bucket_name/ --recursive  --include '*' --metadata-directive REPLACE --content-type='image/jpeg'

把以.jpg结尾的内容变成image/jpeg格式

aws s3 cp s3://bucket_name/ s3://bucket_name/ --recursive --exclude '*' --include '*.jpg' --metadata-directive REPLACE --content-type='image/jpeg'

本文标签： 浏览器图片Amazon