利用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