使用vue實(shí)現(xiàn)下載二進(jìn)制流圖片的方法

發(fā)布時(shí)間：2020-10-28 02:52:07 來源：億速云閱讀：2391 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹使用vue實(shí)現(xiàn)下載二進(jìn)制流圖片的方法，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

1、應(yīng)項(xiàng)目要求，后臺(tái)返回二進(jìn)制流，而且亂碼

2、紅色為必須

使用vue實(shí)現(xiàn)下載二進(jìn)制流圖片的方法

this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), {
 responseType: 'arraybuffer' //指定返回?cái)?shù)據(jù)的格式為blob
 }).then((res) => {
 var src='data:image/jpg;base64,'+ btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''));
 this.srcImg = src; //圖片回顯
 var link = document.createElement('a');
 link.href = src;
 link.download = "qrCode.jpg";
 link.click();
 })

補(bǔ)充知識(shí)：vue img src加載圖片二進(jìn)制問題記錄

此地址請(qǐng)求 http://xx.xx.xx.xx:xxxx/xx/.../xx/downLoadDoc?docId=xxxxx&access_token=xxxxx 返回的png二進(jìn)制流。如下：

使用vue實(shí)現(xiàn)下載二進(jìn)制流圖片的方法

在項(xiàng)目中我使用img src直接對(duì)圖片的二進(jìn)制流加載，遇到頻率很高的問題是前端發(fā)起的請(qǐng)求被服務(wù)器多次302重定向了，然后我訪問的資源存在問題。

然后果斷改為通過http get請(qǐng)求下來png 二進(jìn)制流來處理。思路是通過responseType 制定返回?cái)?shù)據(jù)格式為blob

請(qǐng)求的圖片地址 url = http://xxxxxx:xxxx/xxx/xxx/merchDoc/downLoadDoc

axios({
  method: "get",
  url,
  params: xxx,
  responseType:"blob"
 }).then(response => {
  this.picUrl = window.URL.createObjectURL(response);
});

解析blob 并展示在img src 中如下：

this.picUrl = window.URL.createObjectURL(response);

關(guān)于使用vue實(shí)現(xiàn)下載二進(jìn)制流圖片的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

使用vue實(shí)現(xiàn)下載二進(jìn)制流圖片的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽