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

news2025/4/10 22:27:51

通用下载方法,通过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.coloradmin.cn/o/1866657.html

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

相关文章

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 …

信息学奥赛初赛天天练-36-CSP-J2021阅读程序-ASCII、运算符优先级、二进制补码存储、模拟算法应用

PDF文档公众号回复关键字:20240626 2021 CSP-J 阅读程序2 1 阅读程序(判断题1.5分 选择题3分 共计40分 ) #include<stdio.h> #include<string.h>char base[64]; char table[256]; char str[256]; char ans[256];void init() {for(int i0;i<26;i) base[i]Ai;fo…

动手学深度学习(Pytorch版)代码实践 -卷积神经网络-23卷积神经网络LeNet

23卷积神经网络LeNet import torch from torch import nn import liliPytorch as lp import matplotlib.pyplot as plt# 定义一个卷积神经网络 net nn.Sequential(nn.Conv2d(1, 6, kernel_size5, padding2), # 卷积层1&#xff1a;输入通道数1&#xff0c;输出通道数6&#x…

方法的其他形式——方法使用时常见的问题

示例&#xff1a; public class MethodDemo02 {public static void main(String[] args) {//目标&#xff1a;掌握按照方法的实际业务需求不同&#xff0c;设计出合理的方法形式来解决问题//需求&#xff1a;打印三行Hello World.printfHelloWorld();System.out.println("…

CVPR2024|vivo提出使用对抗微调获得泛化性更强的SAM,分割性能直接登顶 SOTA!

在计算机视觉不断发展的领域中&#xff0c;基础模型已成为一种关键工具&#xff0c;显示出对多种任务的出色适应性。其中&#xff0c;由 Meta AI 开发的 Segment Anything Model&#xff08;SAM&#xff09;在图像分割任务中表现杰出。然而&#xff0c;和其他类似模型一样&…

Python自动化操作:简单、有趣、高效!解放你的工作流程!

今天跟大家分享一套自动化操作流程解决方案&#xff0c;基于Python语言&#xff0c;涉及pyautogui、pyperclip、pythoncom、win32com依赖包。安装命令为&#xff1a; pip install pyautoguipip install pyperclippip install pythoncompip install win32compyautogui 是一个自…

解决“Duplicate keys detected: ‘ ‘.This may cause an update error.”问题

问题原因 出现“Duplicate keys detected”的错误&#xff0c;通常表示在v-for指令中使的:key绑定值有重复。 如果前端是静态数据&#xff0c;一般能自我避免:key绑定值有重复。如果前端是绑定的动态数据&#xff0c;那么需要另外提供一个唯一的键。 在这个例子中&#xff0c…

Xcode安装Simulator失败问题解决方法

Xcode安装Simulator_Runtime失败&#xff0c;安装包离线安装保姆级教程 Xcode更新之后有时候会提示要安装模拟器运行时环境&#xff0c;但是用Xcode更新会因为网络原因&#xff0c;我觉得基本上就是因为苹果服务器的连接不稳定导致的&#xff0c;更可气的是不支持断点续…

链式队列算法库构建

学习贺利坚老师课程,构建链式队列算法库 数据结构之自建算法库——链队&#xff08;链式队列&#xff09;_数据结构函数链队列的算法框架有哪些-CSDN博客文章浏览阅读6.2k次&#xff0c;点赞3次&#xff0c;收藏9次。本文针对数据结构基础系列网络课程(3)&#xff1a;栈和队列…

【unity实战】制作unity数据保存和加载系统——小型游戏存储的最优解(包含数据安全处理方案的加密解密)

前言 如何在 Unity 中正确制作一个保存和加载系统&#xff0c;该系统使用JSON 文件来处理保存配置文件&#xff0c;可以保存和加载任何类型对象&#xff01;标题为什么叫小型游戏存储功能呢&#xff1f;因为该存储功能可能只适合存储数据比较单一的情况&#xff0c;它非常的方…

Leetcode 102.目标和

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

AIGC笔记--U-ViT的简单代码实现

1--前言 原论文&#xff1a;All are Worth Words: A ViT Backbone for Diffusion Models 完整可debug的代码&#xff1a;Simple_U-ViT 2--结构 3--简单代码 以视频作为输入&#xff0c;实现上图红色框的计算&#xff1a; import torch import torch.nn as nn from einops im…

6.2 通过构建情感分类器训练词向量

在上一节中&#xff0c;我们简要地了解了词向量&#xff0c;但并没有去实现它。在本节中&#xff0c;我们将下载一个名为IMDB的数据集(其中包含了评论)&#xff0c;然后构建一个用于计算评论的情感是正面、负面还是未知的情感分类器。在构建过程中&#xff0c;还将为 IMDB 数据…

分享一个 MySQL 简单快速进行自动备份和还原的脚本和方法

前言 数据备份和还原在信息技术领域中具有非常重要的作用&#xff0c;不论是人为误操作、硬件故障、病毒感染、自然灾害还是其他原因&#xff0c;数据丢失的风险都是存在的。如果没有备份&#xff0c;一旦数据丢失&#xff0c;可能对个人、企业甚至整个组织造成巨大的损失。 …

2-17 基于matlab的改进的遗传算法(IGA)对城市交通信号优化分析

基于matlab的改进的遗传算法&#xff08;IGA&#xff09;对城市交通信号优化分析。根据交通流量以及饱和流量&#xff0c;对城市道路交叉口交通信号灯实施合理优化控制&#xff0c;考虑到交通状况的动态变化&#xff0c;及每个交叉口的唯一性。通过实时监测交通流量&#xff0c…

部署企业级AI知识库最重要的是什么?✍

随着人工智能技术的迅猛发展&#xff0c;企业级AI知识库成为提升企业管理效率和信息获取能力的重要工具。那么&#xff0c;在部署企业级AI知识库时&#xff0c;最重要的是什么呢&#xff1f;本文将从数据质量、系统可扩展性、用户体验以及智能化这四个关键方面进行详细分析。 …

单片机是否有损坏,怎沫判断

目录 1、操作步骤&#xff1a; 2、单片机损坏常见原因&#xff1a; 3、 单片机不工作的原因&#xff1a; 参考&#xff1a;细讲寄存器读写与Bit位操作原理--单片机C语言编程Bit位的与或非屏蔽运算--洋桃电子大百科P019_哔哩哔哩_bilibili 1、操作步骤&#xff1a; 首先需要…

Objects and Classes (对象和类)

Objects and Classes [对象和类] 1. Procedural and Object-Oriented Programming (过程性编程和面向对象编程)2. Abstraction and Classes (抽象和类)2.1. Classes in C (C 中的类)2.2. Implementing Class Member Functions (实现类成员函数)2.3. Using Classes References O…

第 28 篇 : SSH秘钥登录

1 生成秘钥 ssh-keygen -t rsa ls -a ./.ssh/一直回车就行了 2. 修改配置 vi /etc/ssh/sshd_config放开注释 公钥的位置修改 关闭密码登录 PubkeyAuthentication yes AuthorizedKeysFile .ssh/id_rsa.pub PasswordAuthentication no3. 下载id_rsa私钥, 自行解决 注意…