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.pswp.cn/diannao/35933.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/35933.shtml
英文地址,請注明出處:http://en.pswp.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的安…