如何使用js ipfs-http-client将IPFS返回内容转为原始.midi/.png等文件

分两种场景处理即可： #

场景1：存入IPFS的是单个未打包的音视频/图片文件 #

你当前拿到的output是IPFS返回的分块Buffer数组，首先合并所有Buffer得到完整的文件二进制内容：

// 合并所有分块Buffer
const fileBuffer = Buffer.concat(output)

如果要在网站内直接使用，转成Blob生成对象URL即可：

// MIME类型根据文件格式调整：音频用'audio/mpeg'等，图片用'image/png'/'image/jpeg'等
const fileBlob = new Blob([fileBuffer], { type: '对应文件的MIME类型' })
const fileUrl = URL.createObjectURL(fileBlob)

// 音频场景直接赋值给audio标签
const audioEl = document.querySelector('audio')
audioEl.src = fileUrl

如果需要导出原始文件，直接触发a标签下载即可：

const a = document.createElement('a')
a.href = fileUrl
a.download = '自定义文件名.对应后缀'
a.click()
URL.revokeObjectURL(fileUrl) // 用完释放内存

场景2：存入IPFS的是tar打包的多文件集合 #

如果返回的是tarball格式内容，需要先解包tar再提取对应文件，用tar-stream工具库处理即可：

import tar from 'tar-stream'

const extract = tar.extract()
const tarBuffer = Buffer.concat(output)

// 监听tar条目读取事件
extract.on('entry', (header, stream, next) => {
  // header包含当前文件的文件名、大小等元信息
  const chunks = []
  stream.on('data', chunk => chunks.push(chunk))
  stream.on('end', () => {
    const entryBuffer = Buffer.concat(chunks)
    // 拿到单文件Buffer后，后续处理逻辑和场景1一致
    next()
  })
  stream.resume()
})

// 传入tar包Buffer触发解包
extract.end(tarBuffer)

额外提示 #

• 不知道文件MIME类型时，可以通过Buffer开头的魔数判断，比如PNG文件开头为89 50 4e 47，MP3文件开头为ff fb，匹配对应特征即可拿到正确类型
• 如果你用的是新版Helia IPFS SDK，可以直接调用ipfs.cat方法直接获取完整内容，无需手动拼接分块：

  const fileBuffer = Buffer.concat(await ipfs.cat(audioCID))
  

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