利用IPFS构建短视频区块链应用开发经历(十)

本系列文章是针对 https://blog.csdn.net/weixin_43668031/article/details/83962959 内容的实现所编写的。开发经历包括思考过程、重构和推翻重来。
先来看一下我完成的效果:
1.选择一张图片。

2.点击上传头像
在这里插入图片描述
此时图片已经上传到ipfs空间里了,还需要去保存到eth的状态变量中。
3.点击仅保存头像
在这里插入图片描述
完成付款
在这里插入图片描述
4.修改头像,昵称和简介。
在这里插入图片描述
5.点击全部保存,完成付款
在这里插入图片描述
已经完成了对个人信息的更新。
主要用到了上一节中列出来的,但是没有使用到的setMyInfo、setMyAvatar方法,当然还有一个简单的上传到ipfs的实例程序,我将一个完整的功能拆分成几个小步骤,分别使用几个按钮来完成,这回大大减少代码阅读的难度,也对会减少我开发初期的工作量。

上传到ipfs空间

        //获取ipfs节点
        const ipfsNode = this.$store.state.ipfsNode;
        //new一个文件对象
        const reader = new FileReader();
        const userAccount = this.userAccount;
        reader.readAsArrayBuffer(this.file);
        reader.onloadend = function(e){
          //将文件内存转成buffer对象
          const buffer = Buffer.from(reader.result);
          //调用ipfs的api上传文件
          ipfsNode.files.add(buffer).then((response)=>{
            userAccount.avatar = response[0].hash;
            console.log(response);
          })
        }

其实代码很简单,主要是这一句 ipfsNode.files.add(buffer).then(()=>{}) 这是ipfs的api所提供的上传接口,不过上传的位置为浏览器的IndexedDB中属于浏览器的缓存空间,实际上数据并没有持久化到磁盘上,在filecoin推出后,还需要做一步,将资源固定到矿工的持久化储存上。我的实验环境下有一个ipfs节点用来干这个事情,会将我上传的还没来得及持久化的数据,储存在节点上,形成持久化数据。所以如果其他人来上传,速度会非常慢,并且由于没有人义务做持久化工作,上传的数据并不固定,所以希望前期实验、测试等环节义务“挖矿”。
这是一个基本的文件读取的代码,将文件读到内存中并转化成buffer对象,在使用ipfs的接口的过程中要求传入的就是buffer对象,官方的工具类包中提供了字符串转buffer,但是文件转buffer我没有找到。如果万能的网友有更好的书写代码,希望踊跃提供,也欢迎提交到github。

        //获取合约实例
        const videoShare = this.$store.state.videoShare;
        //setAvatar的调用方式需要传入设置的值,还有send中传入用户自己的地址,价格是程序自己计算完成的,不需要输入。
        videoShare.methods.setMyAvatar(this.userAccount.avatar)
                .send({ from: this.userAccount.address })
                .on("receipt", function(receipt) {
                  //返回成功上链的信息
                  alert("上链成功,区块高度:"+receipt.blockNumber);
                  console.log(receipt);
                }).on("error", function(error) {
          console.log(error);
        })

        //setMyInfo的调用方式需要传入以上3个值,还有send中传入用户自己的地址,价格是程序自己计算完成的,不需要输入。
        videoShare.methods.setMyInfo(this.userAccount.nickname,this.userAccount.profile,this.userAccount.avatar)
                .send({ from: this.userAccount.address })
                .on("receipt", function(receipt) {
                  //返回成功上链的信息
                  alert("上链成功,区块高度:"+receipt.blockNumber);
                  console.log(receipt);
                }).on("error", function(error) {
          console.log(error);
        })

setMyAvatar 方法和前文中提到的两个方法是一样的setMyNickname、setMyProfile,只不过这里存的字符串的含义是ipfs对象的CID值。
setMyInfo就是将3个值都放进去,只需要付费一次就可以了,节省了付费次数。分离的3个方法因为修改区块链上的状态变量比setMyInfo这个集合方法要少,因此肯定使用了较少的手续费。

具体的帖子参考我前文中的
https://blog.csdn.net/weixin_43668031/article/details/85256071

以太坊的合约代码参考
https://github.com/bill080307/douyinWithEth/blob/master/VideoShare.sol

这2节已经完成了对用户个人信息的修改,代码:
https://github.com/bill080307/douyinWithEth/blob/master/src/views/Userinfo.vue

发布了26 篇原创文章 · 获赞 16 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览