如何使用 react js 正确读取所有文件类型并在浏览器中添加到 IPFS答案

【问题标题】：How to properly read all file types with react js and add to IPFS in browser如何使用 react js 正确读取所有文件类型并在浏览器中添加到 IPFS
【发布时间】：2020-05-18 05:11:56
【问题描述】：

enter image description here

我正在尝试使用 react 读取文件（可以是视频、图像、文本等任何内容）。我想通过 Node JS 在 IPFS 中添加数据。在正常情况下（这意味着当我只用 js 编写时）我会这样做：

const data = await fs.readFile(file_path)
console.log(data)
const filesAdded = await nodeDialer.add({
    path:file_path,
    content:data,
})
console.log(filesAdded)

文件可以轻松添加（任何类型的文件）。

我试过 fs 发现它只在节点端有效，在反应端无效。无论我在哪里看，他们都在为 .txt 文件或 .csv 文件使用一些 readastext 函数。

所以一个合适的解决方案，我找不到。

【问题讨论】：

嗯。节点的fs 和crypto 可能吗？
@rayhatfield，AFAIK 只能在节点环境中运行，即服务器端。 Abhishek，你能用更好的细节更新你的问题吗？到目前为止，您已经尝试过什么，在哪里遇到问题或遇到问题，发布您的代码，您的预期结果应该是什么。尽量做到具体。
@DrewReese 他特别说“在 nodejs 中”。如果这是在浏览器中使用File API——假设文件将由用户在文件输入中选择——然后使用与浏览器兼容的crypto wrapper。我同意这个问题需要澄清。
@rayhatfield 谢谢。只是要求澄清。目前尚不清楚 OP 是否正在尝试运行代码 in 节点，或者它们是否只是 using 节点来运行本地开发服务器以进行反应，因为反应是前端框架。也许他们正在做服务器端渲染（SSR），我们不知道。
现在请看答案@rayhatfield

标签： javascript node.js reactjs

【解决方案1】：

我用这个解决了：

为文件上传创建了一个事件处理程序：

  captureFile(event){
    const file = event.target.files[0]
    this.setState({ file_path : file})
    console.log('--------------', this.state.file_path)
    const reader = new window.FileReader()
    reader.readAsArrayBuffer(file)
    reader.onloadend = () => {
      this.setState({ buffer: Buffer(reader.result) })
      console.log('buffer --- ', this.state.buffer)
      console.log('path --- ', this.state.file_path.name)
    }
  }

然后我在 IPFS 中添加文件：

    const filesAdded =  await node.add({
      path: this.state.file_path.name ,
      content:this.state.buffer
    })

【讨论】：