katonobo’s blog

プログラミング中心の雑記ブログ

Vue.jsでreader.onloadend内のデータを返す方法【ipfs】【Vue.js】 【Dapps】

ipfsに画像をアップロードしようとするときに、FileReaderオブジェクトを使うんですが、その際に非同期処理でreader.onloadendの処理を書きます。

その結果をデータバインディングで表示させたいのですがなかなか取得する方法が見つからなかったので解決策をメモ。

ちなみに、参考にしているReactだと簡単にできている様子。

developer.mozilla.org

github.com

 

原因は、reader.onloadendが非同期処理のため、値が保存されないかららしい(非同期処理むずい)

下記リンクに答えがあった。

teratail.com

 

 

var self = this;

self.InfoData.photoURL = dataUrl;

ここがキモ。

 

 

 

Vue.jsでの、ipfsのファイルアップロートのサンプルメモ

<template>

<div>

   <input type="file" @change="loadFile">

</div>

</template>

 

//スクリプト部分

<script>


data() {
    return {
       url: null,

      }
  },

 

methods: {

    loadFile(e) {
      event.preventDefault()
      const file = e.target.files[0];
      const reader = new FileReader();
      var self = this;                          //ここが大事

      reader.onloadend = function(e){
        var buffer = Buffer(reader.result);
        ipfs.files.add(buffer, function(err, result){
          var ipfsHash = result[0].hash;
          var url = "https://ipfs.io/ipfs/" + ipfsHash;
          self.url = url;                        //urlに入れる
      })
   },
   reader.readAsArrayBuffer(file);
  }

}

</script>