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