前端利用 ipfs 上传文件

一、利用 ipfs.js 上传文件

IPFS 节点搭建 查看此文

查看 demo 源码可直接点击 https://gitee.com/tangying_cn/blog_file/blob/master/ipfs.zip

1. 在 vue 中应用

1. 下载 ipfs

npm i ipfs

注意：
下载过程中可能会遇到 npm 报错，下载失败，可以点击查看此文档
如果还存在问题可以去node官网更新 node

2. 连接 ipfs

import IPFS from 'ipfs'
Vue.prototype.$ipfs = IPFS.create();

3. 上传操作

async saveToIpfs(event) {
  // 获取input上传的文件
  let file = event.target.files[0]
  const ipfs = await this.$ipfs;
  try {
    const added = await ipfs.add(file, {
      progress: (prog) => console.log(`received: ${prog}`),
    });

    // 获取上传文件hash值，'https://ipfs.io/ipfs/'+hashCode 即为上传后的文件地址
    this.hashCode = added.cid.toString();

    // 此处可以对获得的hash值进行其他操作

  } catch (err) {
    console.error(err);
  }
}

注意：https://ipfs.io/ipfs/+hashCode 即为上传后的文件地址

2021.11更新

ipfs 安装包更新，只下载 ipfs-core 即可

1. 下载 ipfs-core

npm i ipfs-core

2. 连接

import * as IPFS from 'ipfs-core' //或 import {create} from 'ipfs-core'
Vue.prototype.$ipfs = IPFS.create(); // 或 Vue.prototype.$ipfs = create();

3. 上传操作如上 👆

2. 在普通 html 中应用

1. 在页面中引入 ipfs.js

<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>

2. 连接 ipfs

(async function(){
    let ipfs = await window.Ipfs.create();
    //这里应用ipfs做其他操作
})()

一定要注意这里是 Ipfs 不是 IPFS,注意大小写
并且这个操作是异步，一定要加 async

3. 上传操作

  let inputAddDOM = document.getElementsByClassName('add')[0];
  (async function(){
    let ipfs = await window.Ipfs.create()
    // 上传文件操作
    inputAddDOM.onchange = (event) => {
      // 获得上传的文件
      let file = event.target.files[0]

      try {
        const added = await ipfs.add(file, {
          progress: (prog) => console.log(`received: ${prog}`),
        });

        // 获取上传文件hash值
        let hashCode = added.cid.toString();

        // 此处可以对获得的hash值进行其他操作
      } catch (err) {
        console.error(err);
      }
    }
  })()

二、利用 ipfs-http-client 上传文件

1. 在 vue 中应用

1. 下载 ipfs-http-client

npm i ipfs-http-client

2. 连接 ipfs

import IpfsHttpClient from 'ipfs-http-client' 
//或 const IpfsHttpClient = require('ipfs-http-client')
this.ipfs = IpfsHttpClient(options);

options 参考值：

1. 可为字符串如：/ip4/ip地址/tcp/端口号 (/ip4/192.168.33.11/tcp/5001)
2. 也可为对象如下：

{
	host:'192.168.33.11',//ip地址
 	port:'5001',//端口号
  	protocol: 'http', //协议名
    apiPath: '/ipfs/api/v0' //路径，默认为此，也可为设为其他
}

3. 上传操作

async saveToIpfs(event) {
  let file = event.target.files[0]
  try {
    const added = await this.ipfs.add(file, {
      progress: (prog) => console.log(`received: ${prog}`),
    });

    // 获取上传文件hash值
    this.hashCode = added.cid.toString();

  } catch (err) {
    console.error(err);
  }
}

2. 在普通 html 中应用

1. 在页面中引入 ipfs-http-client.js

<script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script>

2. 连接 ipfs

const ipfs = window.IpfsHttpClient.create(options);

options 参考值如上（在vue中应用）

3. 上传操作

let inputAddDOM = document.getElementsByClassName('add')[0];
// 上传文件操作
inputAddDOM.onchange = async(event) => {
  // 获得上传的文件
  let file = event.target.files[0]

  // 执行上传函数
  try {
    const added = await ipfs.add(file, {
      progress: (prog) => console.log(`received: ${prog}`),
    });

    // 获取上传文件hash值
    let hashCode = added.cid.toString();

    // 返回hash值
    return Promise.resolve(hashCode)

  } catch (err) {
    console.error(err);
  }
}

总结

他们的上传文件方法都一样ipfs.add(file)

async saveToIpfs(event) {
  let file = event.target.files[0]
  try {
    const added = await this.ipfs.add(file);

    // 获取上传文件hash值
    this.hashCode = added.cid.toString();

  } catch (err) {
    console.error(err);
  }
}

本文 demo 源码

码云地址：https://gitee.com/tangying_cn/blog_file/blob/master/ipfs.zip

官方文档：

API：https://docs.ipfs.io/
github: https://github.com/ipfs/js-ipfs/
例子🌰：https://github.com/ipfs/js-ipfs/tree/5d394c2c0cd0f19dc0f4633e78d52b9450f23566/examples

我的个人博客有空来坐坐

https://www.wangyanan.online