Question

我希望将ipfs用作vue应用程序中的文件存储，以便所有文件都存储在本地。但是，我在理解vue演示及其确切的功能以及前进的方向上很挣扎。

我正在使用vue cli gui，因此已导入最新的js-ipfs作为依赖项，并已基于演示代码构建了一个组件。 https://github.com/ipfs/js-ipfs/tree/master/examples/browser-vue

   <div>
<h1>{{ status }}</h1>
<h2>ID: {{ id }}</h2>
<h2>Agent version: {{ agentVersion }}</h2>
 </div>
</template>

<script>
import VueIpfs from 'ipfs'
//VueIpfs

export default {
  name: 'IpfsInfo',
  data: function () {
     return {
       status: 'Connecting to IPFS...',
       id: '',
  agentVersion: '',
}
   },
mounted: function () {
this.getIpfsNodeInfo()
 },
 methods: {
     async getIpfsNodeInfo() {
   try {
    // Await for ipfs node instance.
    const ipfs = await this.$ipfs
    // Call ipfs `id` method.
    // Returns the identity of the Peer.
    const { agentVersion, id } = await ipfs.id()
    this.agentVersion = agentVersion
    this.id = id
    // Set successful status text.
    this.status = 'Connected to IPFS =)'
  } catch (err) {
    // Set error status text.
    this.status = `Error: ${err}`
  }
    },
  },
}
</script>

但是我不确定1）如何适应最新的vue / cli gui，然后2）下一步要使它从IPFS中显示图像，我是否安装了桌面应用程序？假设我可以呼唤那个“桶”

任何指针都赞赏很多API东西，这些东西立刻超出了atm的深度

我的理解是，该示例组件可用于启动一个IPFS节点，然后使用Vue上传表单将其添加到该IPFS节点...这种类型是有道理的，但我无法确定我是否正确启动了它< / p>

Answer 1

这有效

const ipfs = VueIpfs.create()


//  The below code should create an IPFS node to add files to
export default {
  name: 'IpfsInfo',
  data: function () {
    return {
      status: 'Connecting to IPFS...',
      id: '',
      agentVersion: '',
    }
  },
  mounted: function () {
    console.log(VueIpfs)
    this.getIpfsNodeInfo()
  },
  methods: {
    selectedFile(event) {
      this.file = event.target.files[0]
//TODO: Something like the below
      // console.log(this.file)
      //  ipfs.add(this.file)
    },
    async getIpfsNodeInfo() {
      try {
        // Await for ipfs node instance.
        const node = await ipfs
        //console.log(ipfs)
        // Call ipfs `id` method.
        // Returns the identity of the Peer.
        const { agentVersion, id } = await node.id()
        this.agentVersion = agentVersion
        this.id = id
        // Set successful status text.
        this.status = 'Connected to IPFS =)'
      } catch (err) {
        // Set error status text.
        this.status = `Error: ${err}`
      }
    },
  },
}```

在Vue中使用js-ipfs上传和显示图像

1 个答案: