微信小程序使用ipfs-api实现私有ipfs网络图片文件的上传下载并展示

1。快速搭建IPFS私网（docker）拉取镜像dockerpulldocker.io/ipfs/go-ipfs:latestwriteyaml文件创建两个文件夹，分别命名：ipfs_node1和ipfs_node2，用于启动两个ipfs节点（多机可用）。进入对应文件夹创建并写入yaml文件：mkdiripfs_node1ipfs_node2cdipfs_node1vimdocker-compose.yamlversion:"3"services:ipfs_host:container_name:ipfs_hostimage:docker.io/ipfs/go-ipfs:latestrestart:alwaysvolumes:-./staging:/export-./data:/data/ipfsports:-4001:4001-0.0.0.0:8080:8080-0.0.0.0:5001:5001默认挂载目录是数据和暂存文件在项目目录文件夹，可根据实际情况修改。同样，创建并添加ipfs_node2文件夹yaml文件。cdipfs_node2vimdocker-compose.yamlversion:"3"services:ipfs_host2:container_name:ipfs_host2image:docker.io/ipfs/go-ipfs:latestrestart:alwaysvolumes:-./staging:/export-./data:/data/ipfsports:-4002:4001-0.0.0.0:8082:8080-0.0.0.0:5002:5001启动dockercdipfs_node1docker-composeup-dcdipfs_node2docker-composeup-ddocker启动时会自动创建数据和暂存目录。确保配置IPFSAPI以允许跨源(CORS)请求。配置跨域，方便后续ipfs-api进行get、post等请求。dockerexecipfs_hostipfsconfig--jsonAPI.HTTPHeaders.Access-Control-Allow-Origin'["*"]'dockerexecipfs_hostipfsconfig--jsonAPI.HTTPHeaders.Access-Control-Allow-Methods'["PUT","GET","POST"]'dockerexecipfs_host2ipfsconfig--jsonAPI.HTTPHeaders.Access-Control-Allow-Origin'["*"]'dockerexecipfs_host2ipfsconfig--jsonAPI.HTTPHeaders.Access-Control-Allow-Methods'["PUT","GET","POST"]'生成共享密钥并分发goget-ugithub.com/Kubuxu/go-ipfs-swarm-key-gen/ipfs-swarm-key-genipfs-swarm-key-gen>swarm.key将生成的key复制到两个文件夹的data目录下，并保证两个key一致。移除默认的boostrap节点IPFS默认是通过一些seed连接到全局网络的，但是我们现在要搭建私有网络，所以需要先删除seed节点的连接信息。dockerexecipfs_hostipfsbootstraprm--alldockerexecipfs_host2ipfsbootstraprm--all在两个节点之间建立连接使用ipfsid命令查看添加节点的节点id。dockerexecipfs_hostipfsid第二个节点使用第一个节点的ip地址和id添加另一个节点。dockerexecipfs_host2ipfsbootstrapadd/ip4/192.168.177.130/tcp/4001/ipfs/12D3KooWKJE5cw7N8Arq8mhEMPupxXCuh6Xn6yfHBLWrrcTASqQf按照上述步骤查看第二个节点的id，通过第一个节点添加。重启docker服务，查看邻居。重新启动服务。dockerrestartipfs_hostdockerrestartipfs_host2检查邻居。dockerexecipfs_hostipfsswarmpeerscd/dataecho888>>test.txt添加一个内容为888的txt文件，现在上传。dockerexecipfs_host2ipfsadd/data/ipfs/test.txt通过节点1的ipfscat查看修改后的hash下的文件2.调试IPFS-API调试IPFS使用postman，请求地址格式为http://localhsot(节点ip地址)/ports/api/versiondefaultv0/command语句，例如查看相邻节点的命令为swarmpeers，则请求地址为：http://192.168.177.130:5001/api/v0/swarm/peers获取连接节点的id等信息。上传文件、浏览文件和测试ipfs。上传文件的命令是add。对于API，需要使用post请求，并为body设置from-data格式，然后以key-filevalue的形式上传文件。如果上传成功，则可以得到用于获取文件的hash，可以使用hash预览、下载和保存文件。上传的图片可以通过http://192.168.177.130:8080/ipfs/hash进行预览。3、小程序界面设计postman测试通过后，就可以设计小程序了。设计的主要思路是点击upload按钮将本地图片上传到ipfs，点击download按钮，使用上传的hash获取图片并显示。Wxml效果展示图片如下：4.js部分的图片上传部分首先调用chooseImag函数获取用户上传图片的路径，然后调用uploadFile将图片文件上传到ipfs。使用成功回调函数保存文件下载和预览的哈希值。chooseImg:function(e){varthat=this;varimgs=this.data.imgs;wx.chooseImage({//count:1,//default9sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认都有sourceType:['album','camera'],//可以指定来源是相册还是相机，默认都成功:function(res){consttempFilePaths=res.tempFilePathswx.uploadFile({url:'http://192.168.177.130:5001/api/v0/add',//只是一个例子，非真实接口地址filePath:res.tempFilePaths[0],name:'file',formData:{},成功(res){console.log(JSON.parse(res.data).Hash)vara=JSON.parse(res.data).Hashthat.setData({hashcode:a})}})}});}，图片下载预览部分使用downloadFile函数下载文件并获取保存路径，将文件setdata到images变量，显示到前端。xiazai:function(){varthat=thisvarhashcode=that.data.hashcodewx.downloadFile({url:'http://192.168.177.130:8080/ipfs/'+hashcode,success(res){console.log(res)if(res.statusCode===200){wx.playVoice({filePath:res.tempFilePath})console.log(res.tempFilePath)that.setData({images:res.tempFilePath})}}})}5.效果展示上传图片文件文件上传成功返回文件哈希值下载并展示文件