Angular项目中调用Infura IPFS API上传文件无返回结果问题求助

我太懂你现在的困扰了——放弃已废弃的ipfs-http-client，想直接用Angular的HttpClient调用Infura的IPFS API上传文件，结果不仅控制台输出空，连预期的CID都拿不到，简直摸不着头脑对吧？我帮你梳理下代码里的问题，一步步解决：

先说说你代码里的核心问题点 #

1. 文件传递类型错误：你用FileReader.readAsArrayBuffer把文件转成了ArrayBuffer，然后直接传给FormData。但Infura的IPFS /add接口需要的是multipart/form-data格式的文件，ArrayBuffer并不是FormData能正确解析的类型，这会导致服务器无法识别上传的内容。
2. Observable未订阅：Angular的HttpClient返回的是「冷Observable」——意思是你不调用subscribe()的话，根本不会发送HTTP请求！你之前只是打印了Observable对象，请求都没发出去，自然不会有返回结果。
3. API地址定义语法错误：你写的private readonly apiUrl: 'https://xxx'是TypeScript的类型注解写法，不是赋值语句，这会导致apiUrl的值是undefined，请求地址直接错了。
4. 手动设置Content-Type的隐患：当你传递FormData给HttpClient时，Angular会自动生成正确的multipart/form-data请求头（带boundary分隔符），手动设置反而可能破坏这个正确的头，导致服务器解析失败。

修正后的完整代码 #

1. App Component的文件选择方法

直接传递原始的File对象给服务，同时订阅Observable触发请求：

onFileSelected(event: Event){
  const inputElement = event.target as HTMLInputElement;
  if (inputElement?.files && inputElement.files.length > 0) {
    this.fcUploadFile = inputElement.files[0];
    // 直接传File对象，同时订阅Observable获取结果
    this.IpfsService.uploadToIpfs(this.fcUploadFile).subscribe({
      next: (response) => {
        console.log('上传成功！返回数据:', response);
        console.log('文件CID:', response['Hash']); // Infura返回的CID在Hash字段里
      },
      error: (err) => {
        console.error('上传失败，错误信息:', err);
      }
    });
    console.log('已选中文件:', this.fcUploadFile);
  } else {
    console.error('请选择一个文件！');
  }
}

2. IPFS Service的上传方法

修正API地址定义，用正确的方式构建FormData：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IpfsService {
  // 修正语法：用等号赋值API地址
  private readonly apiUrl = 'https://ipfs.infura.io:5001/api/v0/add?pin=true';

  constructor(private http: HttpClient){}

  uploadToIpfs(file: File){
    const formData = new FormData();
    // 直接传入File对象，第三个参数可选，用来指定文件名（不传则用file本身的name）
    formData.append('file', file, file.name);

    const headers = new HttpHeaders({
      // 替换成你自己的Infura API KEY和SECRET
      Authorization: 'Basic ' + btoa('你的API_KEY:你的API_SECRET')
    });

    // 返回Observable，由调用方订阅触发请求
    return this.http.post(this.apiUrl, formData, { headers });
  }
}

额外的测试建议 #

• 先确认你的Infura API KEY和SECRET是正确的，btoa('KEY:SECRET')的编码没有拼写错误；
• 可以先用Postman测试一下Infura的API：设置请求方法为POST，地址填https://ipfs.infura.io:5001/api/v0/add?pin=true，Headers里加Authorization: Basic 你的编码后字符串，Body选form-data，键名填file，值选本地文件，发送请求看是否能拿到CID，先排除API本身的问题。

备注：内容来源于stack exchange，提问作者COM