JavaScript通用下载方法,但jpg图片下载打不开

通用下载方法,通过Blob的方式,访问Url地址,下载对应的图片,excel等文件。

    axios({method: "get",url,responseType: "blob",}).then((res: any) => {const link = document.createElement("a");const blob = new Blob([res], { type: res.type });link.style.display = "none";link.href = URL.createObjectURL(blob);link.download = decodeURI(fileName);document.body.appendChild(link);link.click();document.body.removeChild(link);}).catch((error) => {console.log(error);reject(error?.data || error?.result);});

复现

其他都没什么问题,但下载jpg图片的时候,下载之后没有后缀,而且打不开。
图标还是磁盘!!

在这里插入图片描述

分析排查与解决

发现获得文件类型是image/jpg。
在这里插入图片描述
查看了一下content-type。

一.什么是content-type?
MediaType,即是Internet Media Type,互联网媒体类型;也叫做MIME类型,在Http协议消息头中,使用Content-Type来表示具体请求中的媒体类型信息。
类型格式:Content-Type: type/subtype; parameter1=“value1” parameter2=“value2” …
type 是主要类型,表示数据的基本类别。
subtype 是次要类型,更具体地描述数据内容。
parameter 是可选的参数,它们可以提供关于内容类型的更多信息,例如字符集、编码等。

解决方案:
而对应的jpg类型是image/jpeg

如果把类型修改之后下载是成功的!

image/jpeg和image/jpg区别是啥?

image/jpg 和 image/jpeg 在实际的MIME类型定义中,存在显著的区别,但主要是基于准确性和习惯用法的考虑。以下是关于这两个MIME类型的详细解释和区别:

准确性:

  • image/jpeg:这是JPEG图像文件的正确MIME类型。JPEG是“Joint Photographic Experts Group”的缩写,它代表了一个由多个组织组成的联合委员会,负责制定JPEG标准。JPEG标准是一种广泛使用的图像压缩标准,可以支持24位颜色,但不支持Alpha通道(即透明度)。
  • image/jpg:这不是一个标准的MIME类型。虽然在一些情况下,它可能被用作JPEG图像的MIME类型,但这并不准确。这种用法可能是基于某些历史原因或误解。

历史原因:

在早期的Windows版本中,由于文件系统对文件扩展名的长度有限制(通常只允许三个字符),因此.jpeg扩展名有时被缩短为.jpg。但这种限制在现代操作系统中已不再存在。

然而,由于.jpg已经广泛使用,并且得到了广泛的兼容性支持,它成为了JPEG图像文件的默认或标准扩展名。

使用建议:

  • 在定义MIME类型时,应该使用image/jpeg而不是image/jpg,以确保准确性和兼容性。
  • 当在Web服务器、HTTP请求头或任何其他需要指定MIME类型的上下文中指定JPEG图像的MIME类型时,应始终使用image/jpeg。

JPEG的特点:

  • JPEG是一种有损压缩格式,这意味着在压缩过程中会丢失一些图像数据。然而,由于这种压缩方式非常高效,JPEG图像可以在保持相对高质量的同时,显著减少文件大小。
  • JPEG压缩是基于离散余弦变换(DCT)的,这是一种由电气工程师Nasir Ahmed在1972年首次提出的有损图像压缩技术。

总结:image/jpg并不是一个标准的MIME类型,而image/jpeg是JPEG图像文件的正确MIME类型。在使用时,应始终选择image/jpeg以确保准确性和兼容性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35933.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端打包配置+nginx配置实现部署及部署地址带特定前缀的几种方式

前端打包后要部署到服务器,在浏览器中可以通过url访问到我们开发的系统,通过nginx代理在工作中是一种很常用的方式。 这里以本地为例,把本地电脑当作一个服务器,实现普通部署、带特定前缀等 前端使用vue-clivue作为例子 以下内容…

1.3 Sqoop 数据同步工具详细教程

Apache Sqoop 是一个开源工具,用于在 Apache Hadoop 和关系型数据库(如 MySQL、Oracle、PostgreSQL 等)之间高效传输数据。Sqoop 可以将结构化数据从关系型数据库导入到 Hadoop 的 HDFS、Hive 和 HBase 中,也可以将数据从 Hadoop …

茴香豆接入微信个人助手部署

将rag产品接入微信工作群,自动回答问题,香吗?? let‘s go 1、打开openxlab平台,找到茴香豆web产品应用中心-OpenXLab 点击进入,设置知识库名字和密码 2、上传知识库文件和编辑正反例等 3、然后进行测试问答…

电脑开机之后屏幕没有任何显示?怎么检查?

前言 最近有很多小伙伴来咨询,自己的电脑开机之后,屏幕真的是一点显示都没有,只有CPU风扇在转。 这个情况小白经常经常经常遇到,所以写一篇关于这个问题的排查教程。按照这个教程来排查,除非真的是硬件损坏&#xff…

算法第八天:leetcode234.回文链表

给你一个单链表的头节点 head ,请你判断该链表是否为回文链表。如果是,返回 true ;否则,返回 false 。 示例 1: 输入:head [1,2,2,1] 输出:true示例 2: 输入:head [1,2…

甲子光年专访天润融通CEO吴强:客户经营如何穿越低速周期?

作者|陈杨、编辑|栗子 社会的发展从来都是从交流和联络开始的。 从结绳记事到飞马传信,从电话电报到互联网,人类的联络方式一直都在随着时代的发展不断进步。只是传统社会通信受限于技术导致效率低下,对经济社会产生影…

LLaMA:挑战大模型Scaling Law的性能突破

实际问题 在大模型的研发中,通常会有下面一些需求: 计划训练一个10B的模型,想知道至少需要多大的数据?收集到了1T的数据,想知道能训练一个多大的模型?老板准备1个月后开发布会,给的资源是100张A100,应该用多少数据训多大的模型效果最好?老板对现在10B的模型不满意,想…

Leetcode 102.目标和

给定一个正整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 ‘’ 或 ‘-’ ,然后串联起所有整数,可以构造一个 表达式 : 例如,nums [2, 1] ,可以在 2 之前添加 ‘’ ,在 1 之前添加 ‘-’ &…

VMware的具体使用

📑打牌 : da pai ge的个人主页 🌤️个人专栏 : da pai ge的博客专栏 ☁️宝剑锋从磨砺出,梅花香自苦寒来 目录 一🌤️VMware的安…

Ubuntu22安装PyCharm

下载(社区版) 官网下载地址 解压 sudo tar -xzvf pycharm-community-2024.1.4.tar.gz 软件移动到指定目录下(根据不同版本修改) sudo mv pycharm-community-2024.1.4/ /usr/local/PyCharm/运行 cd /usr/local/PyCharm/pycha…

使用PEFT库进行ChatGLM3-6B模型的LORA高效微调

PEFT库进行ChatGLM3-6B模型LORA高效微调 LORA微调ChatGLM3-6B模型安装相关库使用ChatGLM3-6B模型GPU显存占用准备数据集加载模型加载数据集数据处理数据集处理配置LoRA配置训练超参数开始训练保存LoRA模型模型推理从新加载合并模型使用微调后的模型 LORA微调ChatGLM3-6B模型 本…

6 序列数据和文本的深度学习

6.1 使用文本数据 文本是常用的序列化数据类型之一。文本数据可以看作是一个字符序列或词的序列。对大多数问题,我们都将文本看作词序列。深度学习序列模型(如RNN及其变体)能够从文本数据中学习重要的模式。这些模式可以解决类似以下领域中的问题: 自然…

JVM专题十一:JVM 中的收集器一

上一篇JVM专题十:JVM中的垃圾回收机制专题中,我们主要介绍了Java的垃圾机制,包括垃圾回收基本概念,重点介绍了垃圾回收机制中自动内存管理与垃圾收集算法。如果说收集算法是内存回收的方法论,那么垃圾收集器就是内存回…

【开发者推荐】告别繁琐:一键解锁国产ETL新贵,Kettle的终结者

在数字化转型的今天,数据集成的重要性不言而喻。ETL工具作为数据管理的核心,对企业决策和运营至关重要。尽管Kettle广受欢迎,但国产ETL工具 TASKCTL 以其创新特性和卓越性能,为市场提供了新的选择。 TASKCTL概述 TASKCTL 是一款免…

wget之Win11中安装及使用

wget之Win11中安装及使用 文章目录 wget之Win11中安装及使用1. 下载2. 安装3. 配置环境变量4. 查看及使用1. 查看版本2. 帮助命令3. 基本使用 1. 下载 下载地址:https://eternallybored.org/misc/wget 选择对应的版本进行下载即可 2. 安装 将下载后的wget-1.21.4-w…

算法导论 总结索引 | 第四部分 第十六章:贪心算法

1、求解最优化问题的算法 通常需要经过一系列的步骤,在每个步骤都面临多种选择。对于许多最优化问题,使用动态规划算法求最优解有些杀鸡用牛刀了,可以使用更简单、更高效的算法 贪心算法(greedy algorithm)就是这样的算…

Git 学习笔记(超详细注释,从0到1)

Git学习笔记 1.1 关键词 Fork、pull requests、pull、fetch、push、diff、merge、commit、add、checkout 1.2 原理(看图学习) 1.3 Fork别人仓库到自己仓库中 记住2个地址 1)上游地址(upstream地址):http…

【Qt】Qt多线程编程指南:提升应用性能与用户体验

文章目录 前言1. Qt 多线程概述2. QThread 常用 API3. 使用线程4. 多线的使用场景5. 线程安全问题5.1. 加锁5.2. QReadWriteLocker、QReadLocker、QWriteLocker 6. 条件变量 与 信号量6.1. 条件变量6.2 信号量 总结 前言 在现代软件开发中,多线程编程已成为一个不可…

C语言类型转换理解不同的基本类型为什么能够进行运算

类型转换 1.类型转换1.1隐式转换1.2常用算术转换1.2强制类型转换 1.类型转换 在执行算数运算时,计算机比C语言的限制更多。为了让计算机执行算术运算,通常要求操作数用相同的大小(即为的数量相同),但是C语言却允许混合…

Java基础:常用类(四)

Java基础:常用类(四) 文章目录 Java基础:常用类(四)1. String字符串类1.1 简介1.2 创建方式1.3 构造方法1.4 连接操作符1.5 常用方法 2. StringBuffer和StringBuilder类2.1 StringBuffer类2.1.1 简介2.1.2 …