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

2024-06-18 11:08

本文主要是介绍上传到amazon s3的图片在浏览器不显示,而是下载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

通过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.com/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 s3的图片在浏览器不显示,而是下载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1071918

相关文章

SQL server数据库如何下载和安装

《SQLserver数据库如何下载和安装》本文指导如何下载安装SQLServer2022评估版及SSMS工具,涵盖安装配置、连接字符串设置、C#连接数据库方法和安全注意事项,如混合验证、参数化查... 目录第一步:打开官网下载对应文件第二步:程序安装配置第三部:安装工具SQL Server Manageme

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》:本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

如何在Mac上彻底删除Edge账户? 手动卸载Edge浏览器并清理残留文件技巧

《如何在Mac上彻底删除Edge账户?手动卸载Edge浏览器并清理残留文件技巧》Mac上的Edge账户里存了不少网站密码和个人信息,结果同事一不小心打开了,简直尴尬到爆炸,想要卸载edge浏览器并清... 如果你遇到 Microsoft Edge 浏览器运行迟缓、频繁崩溃或网页加载异常等问题,可以尝试多种方

Python如何将OpenCV摄像头视频流通过浏览器播放

《Python如何将OpenCV摄像头视频流通过浏览器播放》:本文主要介绍Python如何将OpenCV摄像头视频流通过浏览器播放的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完... 目录方法1:使用Flask + MJPEG流实现代码使用方法优点缺点方法2:使用WebSocket传输视

SpringSecurity显示用户账号已被锁定的原因及解决方案

《SpringSecurity显示用户账号已被锁定的原因及解决方案》SpringSecurity中用户账号被锁定问题源于UserDetails接口方法返回值错误,解决方案是修正isAccountNon... 目录SpringSecurity显示用户账号已被锁定的解决方案1.问题出现前的工作2.问题出现原因各

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,