axios 对于下载图片处理

1.vue3项目中利用axios 获取图片，返回值类型设置为blob

import axios from 'axios'

axios.get(
    'api/v1/images/2024-08-14/2/1-1-0935c106-76b3-4472-9e78-7bcc4e96c315_roi.jpg',
    {
      responseType: 'blob'
    }
  )
  .then((res) => {
    console.log(res)
  })

返回结果

2.对获取的结果进行进行处理

2.1将blob格式转成url

const realImgSrc = window.URL.createObjectURL(res.data as any)

控制台输出

2.2将blob转成后端返回结果（对于获取图片出错，接口返回结果）

//reader是异步处理的结果
function readBlobText(blob: Blob) {
  const reader = new FileReader()
  reader.readAsText(blob)
  return new Promise((resolve, reject) => {
    reader.onload = (event) => {
      resolve(JSON.parse((event.target?.result as string) || 'null'))
    }
    reader.onerror = reject
    reader.onabort = reject
  })
}

let responseData: any = res.data
responseData = await readBlobText(responseData as Blob)

后端接口返回结果，才能进行解析。正常获取的结果是一张图片，是url。

3.全部代码

axios.get(
    'api/v1/images/2024-08-14/2/1-1-0935c106-76b3-4472-9e78-7bcc4e96c315_roi.jpg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MjM2MDU4NzIsInJvbGUiOjEsInVzZXJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiJ9.v2yB24UXzdg4gHWbnzlMR1vgTj6VWZ4SZjEji1ZZwec',
    {
      responseType: 'blob'
    }
  )
  .then(async (res) => {
    const realImgSrc = window.URL.createObjectURL(res.data as any)

    let responseData: any = res.data
    responseData = await readBlobText(responseData as Blob)
  })