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,一经查实,立即删除!

相关文章

安装IIS报错 0x8024402C

我在windows2012上安装.NET 运行环境时, 先安装的sqlserver, 然后提示缺少framework3.5的安装之类的。 然后又进行IIS和.NET运行库framework的安装,结果也提示安装失败,错误代码0x8024402C。 我照着网上的帮助卸载了sqlserver 并…

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

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

第2次作业

问题:cs与msf权限传递,以及mimikatz抓取win2012明文密码。 一、CS与MSF权限传递 CS(Cobalt Strike)和MSF(Metasploit Framework)是两种常用的渗透测试工具,它们都支持在渗透过程中传递权限。以…

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

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

git 多分支实现上传文件但避免冲突检测

文章目录 背景实现步骤 背景 对于某些通过命令生成的配置文件(如 TypeScript 类型文件等) 实现步骤 1

背包问题(动归)

目录 问能否能装满背包(或者最多装多少):dp[j] max(dp[j], dp[j - nums[i]] nums[i]); 对应题目如下: 416.分割等和子集 (物品正序,背包倒序) 问装满背包有几种方法:dp[j] dp[j - nums[i]] &#xff…

父级设置最大宽度,其宽度自适应子级中的内容

父级宽度自适应 1.父级限制最大宽度 2.子级竖着排放,每列的个数明确 3.父级的宽度跟随子级元素的个数变化宽度 tips: 因为父级要设置"background-color"属性,所以父级DIV必须要给明确的宽高,这就意味着纯CSS自适应宽度无法做到(好吧,是我做不到) HTML <temp…

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

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

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

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

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

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

面向对象编程——python

目录 一、面向对象编程 1.1 类和对象 1.2 继承 1.3 封装 1.4 多态 1.5 Python中的面向对象编程 二、类、对象和变量 2.1 类&#xff08;Class&#xff09; 2.2.1 类的属性&#xff08;Class Attributes&#xff09; 2.2.2 类的方法&#xff08;Class Methods…

对类与对象的(二)补充

1.Date这样的构造函数 析构函数 拷贝构造 默认构造函数有三种 &#xff1a;全缺省的构造函数 无参的构造函数 和编译器默认生成的构造函数 class Date {pubilc&#xff1a;void Print&#xff08;&#xff09; { } private&#xff1a;//全缺省的int year1;int month1;int …

二叉树的广度优先搜索(层次遍历)

目录 定义 层序遍历的数据结构 实现过程简述 具体代码 定义 层序遍历就是从左到右一层一层地遍历二叉树。 层序遍历的数据结构 层序遍历需要借用一个辅助数据结构实现&#xff0c;由于队列具有先进先出的特性&#xff0c;符合一层一层遍历的逻辑&#xff0c;而栈先进后出…

PHP框架之Laravel框架

Laravel框架详解 Laravel&#xff0c;作为一款广受欢迎的PHP Web开发框架&#xff0c;以其优雅、简洁的语法和强大的功能特性&#xff0c;赢得了全球众多开发者的青睐。下面&#xff0c;我们将从Laravel的特点、应用案例以及具体的框架使用等方面进行详细解析。 一、Laravel框…

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

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

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

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

退市新规解读—财务类强制退市

一、退市风险警示&#xff1a;第一年触及相关指标 上市公司最近一个会计年度触及下列退市风险指标之一&#xff0c;公司股票或存托凭证被实施退市风险警示(*ST)&#xff1a; 第1项 组合类财务指标 仅发行A股或B股&#xff0c;最近一个会计年度或追溯重述后最近一个会计年度 …

Leetcode 102.目标和

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

C#面:C#属性能在接口中声明吗?

在C#中&#xff0c;接口是一种定义了一组方法、属性和事件的类型。在接口中&#xff0c;只能声明方法、属性和事件的签名&#xff0c;而不能包含字段、构造函数或实现代码。因此&#xff0c;C#属性不能直接在接口中声明。 然而&#xff0c;你可以在接口中定义属性的签名&#…

VMware的具体使用

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 目录 一&#x1f324;️VMware的安…