Ionic Angular使用@awesome-cordova-plugins/http获取图片返回空data求助

我有一个返回图片的API端点，响应头如下：

Server: Apache/2.4.18 (Ubuntu)
X-Powered-By: Express 
Access-Control-Allow-Origin: * 
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Content-Type: image/jpeg
Content-Length: 445414

使用浏览器或Insomnia访问该API端点时，图片可正常显示。但在Ionic Angular应用中使用@awesome-cordova-plugins/http请求该图片时，返回的响应数据为空。HTTP调用返回的响应如下：

{
"status": 200,
"headers": {
"content-length": "445414",
"server": "Apache/2.4.18 (Ubuntu)",
"x-android-selected-protocol": "http/1.1",
"x-android-response-source": "NETWORK 200",
"access-control-allow-origin": "*",
"keep-alive": "timeout=5, max=100",
"x-powered-by": "Express",
"connection": "Keep-Alive",
"content-type": "image/jpeg",
"accept-ranges": "bytes",
"cache-control": "public, max-age=0"
},
  "data": {}
}

其中data字段本应包含blob，我需要将其转换为base64，该功能此前可正常工作。用于请求的Angular代码如下：

const reqOptions: any = {
    method: "get",
    responseType: "blob",
  };

  const res: HTTPResponse = await this.http.sendRequest(url, reqOptions);
  const convertBlobToBase64 = (blob: Blob) =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    });

  const base64Data = (await convertBlobToBase64(blob)) as string;

• 修正请求参数，指定二进制数据类型
  @awesome-cordova-plugins/http默认会把响应解析为JSON，所以需要显式设置dataType: 'binary'来获取二进制数据。修改请求选项：

  const reqOptions: any = {
      method: "get",
      dataType: "binary", // 关键：指定返回二进制数据
      responseType: "arraybuffer" // 配合dataType，返回ArrayBuffer格式
  };
  

• 处理返回的ArrayBuffer并转换为Blob
  请求成功后，res.data会是ArrayBuffer类型，需要先将其转为Blob，再转base64：

  const res: HTTPResponse = await this.http.sendRequest(url, reqOptions);
  // 将ArrayBuffer转为Blob
  const blob = new Blob([res.data], { type: 'image/jpeg' });
  
  const convertBlobToBase64 = (blob: Blob) =>
      new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onerror = reject;
          reader.onload = () => {
              resolve(reader.result);
          };
          reader.readAsDataURL(blob);
      });
  
  const base64Data = (await convertBlobToBase64(blob)) as string;
  

• 检查插件版本并更新
  旧版本的@awesome-cordova-plugins/http可能存在二进制数据处理的bug，执行以下命令更新插件：

  npm update @awesome-cordova-plugins/http
  

• 尝试使用插件的get方法简化请求
  可以直接使用插件提供的get方法，指定响应类型：

  const res = await this.http.get(url, {}, { dataType: 'binary', responseType: 'arraybuffer' });
  const blob = new Blob([res.data], { type: 'image/jpeg' });
  // 后续转base64逻辑不变
  

• 排查代码中的变量错误
  原代码中convertBlobToBase64(blob)里的blob变量未定义，应该是从res.data转换而来，这也是导致后续逻辑失效的一个问题。

内容的提问来源于stack exchange，提问作者Jitendera Kumar