Ionic Native HTTP请求返回无类型Blob 如何设置正确的image/png类型

问题原因 #

1. 调用sendRequest返回的Blobtype为空，是因为目标服务器返回图片响应时没有携带正确的Content-Type: image/png响应头，Ionic Http底层会直接沿用响应头里的Content-Type作为Blob的type值，没有就留空，但Blob本身的二进制数据是完整的（从你打印的size为15312可以验证）。
2. 直接调用ionicHttp.get()转Blob为空，是因为你没有指定responseType为二进制类型，Ionic Http默认会把响应数据解析为文本格式，二进制图片数据被强制转文本会丢失字节，最终转出来的Blob就是空的或者损坏的。

解决方案 #

方案1：直接基于sendRequest返回的Blob修正类型

Blob对象本身是不可变的，无法直接修改原有实例的type属性，但可以直接用原有Blob的完整二进制数据新建一个Blob实例，手动指定type即可，不需要调整请求逻辑：

const reqOptions: any = {
    method: 'get',
    responseType: 'blob',
    headers: {
        accept: 'image/*'
    }
}
const originBlob = await this.ionicHttp.sendRequest(url, reqOptions)
// 基于原有Blob的二进制数据新建，指定正确type
const correctBlob = new Blob([originBlob], { type: 'image/png' })

方案2：修正ionicHttp.get()的调用逻辑，自行构建Blob

调用get方法时显式指定responseType为arraybuffer拿到原始二进制数据，再转Blob即可避免空内容问题：

const resp = await this.ionicHttp.get(url, {
  responseType: 'arraybuffer',
  headers: {
    accept: 'image/*'
  }
})
const correctBlob = new Blob([resp.data], { type: 'image/png' })

验证 #

生成correctBlob后可以打印确认属性，正常会输出Blob {size: 15312, type: "image/png"}，数据和原请求返回的完全一致，仅type属性修正为目标值。

内容的提问来源于stack exchange，提问作者Lucas.Feichtinger