Unsplash에서 IPFS로 이미지를 보내는 방법은 무엇입니까?

성장 전략에 web3 환경을 포함할 것을 제안합니다. 따라서 subgraph 또는 IPFS와 같은 기술 구현 분산 네트워크를 사용해야 합니다.


이 가이드에서는 ipfs-http-client 및 Nextjs를 사용하여 IPFS에 이미지 파일을 보내는 방법을 배웁니다.

데모here를 보거나 직접 이동GitHub할 수 있습니다.

사전 요청

노드 15 >

시작하기

간단한 다음 js 앱을 만듭니다.

npx create-next-app ipfs

원사를 사용하여 IPFS HTTP 클라이언트 라이브러리를 추가합니다.

yarn add ipfs-http-client

IPFS 게이트웨이에 대한 새 상수를 만듭니다. 이 경우 Infura API를 사용합니다.

const client = create("https://ipfs.infura.io:5001/api/v0");

Unsplash에서 임의의 이미지 URL을 가져옵니다. here에서 자세한 내용을 볼 수 있습니다.

async function getImage() {
fetch(https://source.unsplash.com/500x500/?beach).then((response) => {
let imageURL = response.url;
setImageURL(imageURL);
});
}

또는 사용자 지정 양식 데이터, Cloudinary 등과 같은 고유한 가져오기 솔루션을 사용할 수 있습니다.

그런 다음 파일을 IPFS에 업로드합니다.

중요한 것은 이미지 URL을 blob 객체로 가져와야 한다는 것입니다.

const blobFile = await fetch(imageURL).then((r) => r.blob());

uploadFile로 새 함수 만들기

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의 게시물에서 Web3에 대한 자세한 사례를 볼 수 있습니다.


읽어 주셔서 감사합니다. 👋 Medium에서 저를 구독하는 것을 잊지 마세요. 또는