浏览器端使用nft.storage上传引入fs模块报错该如何解决

错误原因 #

你遇到的报错本质是fs是Node.js 专属的内置文件系统模块，完全不支持浏览器环境。所有基于fs封装的fs-extra、graceful-fs等包也都是Node端专用，不可能在浏览器里运行。同时浏览器出于安全限制，也不允许JS直接通过路径读取本地磁盘文件，必须通过用户主动触发的文件选择交互获取文件。

解决步骤 #

1. 新增HTML文件选择控件 #

首先在页面中添加文件选择入口，允许用户手动选中要上传的本地文件：

<input type="file" id="filePicker" multiple>
<button id="upload-file-ipfs">上传到IPFS</button>
<pre id="out"></pre>

2. 调整JS代码 #

删除所有fs相关的导入和调用逻辑，直接从文件选择控件获取用户选中的File对象传入storeDirectory即可：

<script type="module">
  import { NFTStorage, File } from 'https://cdn.skypack.dev/nft.storage'

  const endpoint = 'https://api.nft.storage'
  const token = '你的API密钥' // 替换为你自己的nft.storage密钥

  function log(msg) {
    msg = JSON.stringify(msg, null, 2)
    document.getElementById('out').innerHTML += `${msg}\n`
  }

  document.querySelector('#upload-file-ipfs').addEventListener('click', async (e) => {
    e.preventDefault()
    // 获取用户选中的文件列表
    const fileInput = document.getElementById('filePicker')
    if (fileInput.files.length === 0) {
      log('请先选择要上传的文件')
      return
    }

    const storage = new NFTStorage({ endpoint, token })
    // 直接把文件对象数组传入storeDirectory即可
    const cid = await storage.storeDirectory(fileInput.files)
    log({ cid })
    const status = await storage.status(cid)
    log(status)
  })
</script>

3. 可选：自定义文件路径 #

如果你需要把上传的文件放到指定的文件夹层级，可以手动调整File的名称前缀，比如：

const files = Array.from(fileInput.files).map(file => {
  // 所有文件都放到assets文件夹下
  return new File([file], `assets/${file.name}`)
})
const cid = await storage.storeDirectory(files)

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