一、利用 ipfs.js 上传文件
IPFS 节点搭建 查看此文
查看 demo 源码可直接点击 https://gitee.com/tangying_cn/blog_file/blob/master/ipfs.zip
1. 在 vue 中应用
- 下载 ipfs
npm i ipfs
注意:
下载过程中可能会遇到 npm 报错,下载失败,可以点击查看此文档
如果还存在问题可以去node官网更新 node
- 连接 ipfs
import IPFS from 'ipfs'
Vue.prototype.$ipfs = IPFS.create();
- 上传操作
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
即可
- 下载 ipfs-core
npm i ipfs-core
- 连接
import * as IPFS from 'ipfs-core' //或 import {create} from 'ipfs-core'
Vue.prototype.$ipfs = IPFS.create(); // 或 Vue.prototype.$ipfs = create();
- 上传操作如上 👆
2. 在普通 html 中应用
- 在页面中引入 ipfs.js
<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>
- 连接 ipfs
(async function(){
let ipfs = await window.Ipfs.create();
//这里应用ipfs做其他操作
})()
一定要注意这里是
Ipfs
不是 IPFS,注意大小写
并且这个操作是异步,一定要加async
- 上传操作
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 中应用
- 下载 ipfs-http-client
npm i ipfs-http-client
- 连接 ipfs
import IpfsHttpClient from 'ipfs-http-client'
//或 const IpfsHttpClient = require('ipfs-http-client')
this.ipfs = IpfsHttpClient(options);
options
参考值:
- 可为字符串如:/ip4/ip地址/tcp/端口号 (/ip4/192.168.33.11/tcp/5001)
- 也可为对象如下:
{
host:'192.168.33.11',//ip地址
port:'5001',//端口号
protocol: 'http', //协议名
apiPath: '/ipfs/api/v0' //路径,默认为此,也可为设为其他
}
- 上传操作
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 中应用
- 在页面中引入 ipfs-http-client.js
<script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script>
- 连接 ipfs
const ipfs = window.IpfsHttpClient.create(options);
options
参考值如上(在vue中应用)
- 上传操作
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