unsplashからIPFSにイメージを送る方法?

私はあなたの成長戦略にweb 3環境を含めることをお勧めします.したがって、subgraphまたはIPFSのような技術的な実装分散ネットワークを使用する必要があります.
このガイドでは、どのようにイメージファイルを送信するために
あなたはデモIPFSまたは直接hereにジャンプを見ることができます
GitHub

事前リクエスト

のノード15＞

始める

シンプルな次の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または私を購読するのを忘れないでください