unsplashからIPFSにイメージを送る方法?
5343 ワード
私はあなたの成長戦略にweb 3環境を含めることをお勧めします.したがって、subgraphまたはIPFSのような技術的な実装分散ネットワークを使用する必要があります.
このガイドでは、どのようにイメージファイルを送信するために
あなたはデモIPFSまたは直接hereにジャンプを見ることができます
GitHub
のノード15>
シンプルな次のJSアプリを作成します
次に、ファイルをIPFSにアップロードします.
重要なことは、イメージURLをBLOBオブジェクトとして取得する必要があります.
完全なリポジトリhereをクローン化して実行します
読書ありがとう.👋 hereまたは私を購読するのを忘れないでください
このガイドでは、どのようにイメージファイルを送信するために
あなたはデモIPFSまたは直接hereにジャンプを見ることができます
GitHub
事前リクエスト
始める
シンプルな次のJSアプリを作成します
npx create-next-app ipfs
IPFS HTTPクライアントライブラリを糸を使って追加します.yarn add ipfs-http-client
IPFSゲートウェイの新しい定数を作成します.この場合、
APIを使用します.const client = create("https://ipfs.infura.io:5001/api/v0");
UnsplashからランダムなイメージのURLを取得します.あなたはInfuraで詳細を見ることができます.async function getImage() {
fetch(https://source.unsplash.com/500x500/?beach).then((response) => {
let imageURL = response.url;
setImageURL(imageURL);
});
}
または、カスタムフォームデータのような独自のフェッチソリューションを使用できます.次に、ファイルをIPFSにアップロードします.
重要なことは、イメージURLをBLOBオブジェクトとして取得する必要があります.
const blobFile = await fetch(imageURL).then((r) => r.blob());
アップロードファイルとして新しい関数を作成するasync function uploadFile() {
const blobFile = await fetch(imageURL).then((r) => r.blob());
try {
const added = await client.add(blobFile);
const url = https://ipfs.infura.io/ipfs/${added.path};
updateIPFSURL(url);
} catch (error) {
console.log("Error uploading file: ", error);
}
}
最後に、URLから画像イメージオブジェクトを取得し、IPFSに送る準備ができています.完全なリポジトリhereをクローン化して実行します
yarn dev
あなたはNader Dabitの投稿からWeb 3についてのより詳細なケースを見ることができます.読書ありがとう.👋 hereまたは私を購読するのを忘れないでください
Reference
この問題について(unsplashからIPFSにイメージを送る方法?), 我々は、より多くの情報をここで見つけました https://dev.to/raufsamestone/how-to-send-an-image-from-unsplash-to-ipfs-2e7aテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol