イーサリアムの動作-VueはファイルをIPFSにアップロードします
IPFSはいInterPlanetary File System、略語、中国語は星間ファイルシステムです。
使用中のBaiduNetdiskと大差ありません。最大の違いは、Baidu NetdiskのリソースがBaiduによって制御されているのに対しIPFS、Baidu Netdiskのリソースは無数IPFSのノードによって制御されており、「こんにちは、このファイルはできません。アップロードしてもダウンロードできません！」
- プロジェクトを初期化する
最初に、初期化された空白のVueプロジェクトをローカルにコピーします。このプロジェクトは基本プロジェクトdapp-basicであり、コピーするときに直接名前を付けます。ipfs
$ git clone https://gitee.com/ibmeye/dapp-basic ipfs
次のコマンドを実行して依存関係をインストールし、プロジェクトを開始します
$ yarn
$ yarn run serve
起動後、次のインターフェイスが表示されます
- プロジェクトルートで次のコマンドを実行して、
ipfs依存関係を追加します
$ yarn add ipfs-http-client
- ファイルを開き、
src/components/MainContent.vue画像ラベル、ボタンラベル、およびそのハンドラー関数を追加します。
変更前のコード（コードの一部のみが含まれています。詳細については、付録のソースコードのダウンロードアドレスを参照してください）。
<template>
<el-container>
<el-container>
<el-header>
<span class="bilibili-text">DApp开发</span>
<span class="tarot-text">基础模板</span>
<span class="account-text">登录账户</span>
</el-header>
<el-main>
<div class="img-wrapper">
<el-image class="img-panel" :src="src"></el-image>
<el-button class="img-btn">上传图片</el-button>
</div>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "",
data() {
return {
src: ''
};
},
methods: {
},
};
</script>
変更されたコード：
<template>
<el-container>
<el-container>
<el-header>
<span class="bilibili-text">DApp开发</span>
<span class="tarot-text">基础模板</span>
<span class="account-text">登录账户</span>
</el-header>
<el-main>
<div class="img-wrapper">
<img class="img-panel" :src="src"/>
<div class="txt-title">{
{ipfsHash}}</div>
<el-upload
class="img-upload"
action="tmp"
:limit="1"
:on-change="handleChange"
:on-exceed="handleExceed"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="uploadImage">上传到服务器</el-button>
</el-upload>
</div>
</el-main>
</el-container>
</el-container>
</template>
<script>
import {
create } from 'ipfs-http-client'
export default {
name: "",
props: {
msg: String,
},
data() {
const ipfs = create('https://ipfs.infura.io:5001')
return {
src: '',
fileList: [],
ipfs: ipfs,
buffer: null,
ipfsHash: ''
};
},
computed: {
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList;
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${
files.length} 个文件，共选择了 ${
files.length + fileList.length} 个文件`);
},
uploadImage() {
if (this.fileList.length < 1) {
this.$message.warning('请选择需要上传的文件')
} else {
const reader = new window.FileReader()
console.log(this.fileList[0].raw)
reader.readAsArrayBuffer(this.fileList[0].raw)
reader.onloadend = () => {
this.buffer = Buffer(reader.result)
this.uploadToIPFS()
}
}
},
async uploadToIPFS() {
let result = await this.ipfs.add(this.buffer)
console.log(result)
this.src = `https://ipfs.infura.io/ipfs/${
result.path}`
this.ipfsHash = `${
result.path}`;
}
},
beforeMount() {
},
};
</script>
次の図は、変更された効果を示しています。ファイルを読み取り、アップロードするファイルを選択してから、[サーバーにアップロード]をクリックして、星間ファイルシステムIPFSにアップロードできます。
図の赤いボックス内のコンテンツは、星間ファイルシステムにアップロードされたばかりのコンテンツのパス名であり、パブリックゲートウェイ+パス名を介してファイルに直接アクセスできます。
たとえば、アップロードしたばかりの画像には、https：//ipfs.infura.io/ipfs/QmT33oRCvxj5HxqFt1QakSgeAe1f3zszPBJxehyF54Zcse`を使用してアクセスできます。
その中にhttps://ipfs.infura.io/ipfs/は、パブリックゲートウェイがあり、他のパブリックゲートウェイをhttps://ipfs.github.io/public-gateway-checker/照会できます。