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

Question

我希望使用ipfs作为vue应用程序中的文件存储，以便所有文件都存储在本地。然而，我正在努力理解vue演示，它到底是做什么的，以及我是如何前进的。

我使用vue cli gui，所以我导入了最新的js-ipf作为依赖项，并基于演示代码构建了一个组件。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图形用户界面，然后2)下一步让这显示图像的IPFS，我已经安装了桌面应用程序？假设我能呼入那个“桶”

任何喜欢API的指针都不在我的理解范围之内

我的理解是，示例组件可用于启动IPFS节点，然后我使用Vue upload表单添加到该IPFS节点……这是有道理的，但我看不出我是否正确地启动了它

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}`
      }
    },
  },
}```