React를 사용하여 IPFS infura.io에 파일을 업로드하는 방법.

infura가 퍼블릭 게이트웨이의 가치를 떨어뜨린 후 많은 개발자가 IPFS infura에 파일을 업로드하는 동안 문제에 직면합니다.

우리가 할 일.

• infura 계정을 만들고 설정합니다.
• 우리는 IPFS에 파일을 업로드할 것입니다
• 우리는 IPFS에서 콘텐츠에 액세스합니다.

infura 계정 설정.

공식 웹사이트 infura.io 로 이동하여 생성 및 서명 후 계정이 없는 경우 새 계정을 생성하고 새 키 생성 을 클릭합니다 .

 

네트워크 IPFS를 선택하고 원하는 프로젝트 이름을 언급하고 생성하십시오.

 

여기에서 프로젝트 비밀 키, API 키 비밀 및 IPFS 엔드포인트에 다음 자격 증명이 표시되면 여기에서 원하는 또 다른 사항은 전용 게이트웨이 도메인 링크이므로 전용 게이트웨이 옵션을 활성화하여 얻을 수 있습니다. 원하는 도메인 이름을 입력하고 도메인을 저장합니다.

 

이제 계정을 설정했으며 이제 전용 게이트웨이가 생겼습니다. 나중에 프로젝트에서 이 모든 자격 증명을 사용할 것입니다.

프로젝트의 IPFS에 파일을 업로드하는 방법.

React 프로젝트에는 ipfs-http-client라는 npm 패키지가 필요합니다. 이 명령을 사용하여 설치하세요.

npm i ipfs-http-client

반응 프로젝트에서 App.js 파일을 열고 에서 제공 하는 ipfs-http-client we are importing create기능을 가져오고 반응 프로젝트에서 infura 자격 증명을 설정합니다.ipfsHttpClientipfs-http-client

import { create as ipfsHttpClient } from "ipfs-http-client";

App.js 구성 요소에 infura 키를 추가 base64하면 기능을 사용하여 키를 생성하여 권한 부여 키를 생성하는 데 사용할 것입니다.btoa

 

const projectId = "<YOUR PROJECT ID>";
const projectSecret = "<YOUR PROJECT SECRET>";
const authorization = "Basic " + btoa(projectId + ":" + projectSecret);

참고: 더 안전한 대안을 위해 환경 변수를 자유롭게 사용하십시오.

이제 우리는 함수 ipfs에 의해 반환되는 ipfs http 클라이언트를 저장할 변수를 생성할 것 입니다. include 함수 create에 인수를 전달 하고 include create url headers authorization

 const ipfs = create({
      url: "https://ipfs.infura.io:5001/api/v0",
      headers:{
        authorization
      }
    })

 

IPFS 와 연결을 설정한 후 입력 양식에서 파일을 업로드합니다.

 

 

 <div className="App">
      {ipfs && (
        <>
          <h3>Upload file to IPFS</h3>
          <form onSubmit={onSubmitHandler}>
            <input type="file" name="file"/>
            <button type="submit">Upload file</button>
          </form>
        </>
      )}
    </div>

 

onSubmitHandler모든 구현을 처리하는 주요 기능으로 코드를 작성할 수 있습니다.

const onSubmitHandler = async (event) => {
    event.preventDefault();
    const form = event.target;
    const files = (form[0]).files;

    if (!files || files.length === 0) {
      return alert("No files selected");
    }

    const file = files[0];
    // upload files
    const result = await ipfs.add(file);

    setImages([
      ...images,
      {
        cid: result.cid,
        path: result.path,
      },
    ]);

    form.reset();
  };

이 함수의 논리는 간단합니다.

1. 선택한 경우 파일을 확인하십시오. 그렇지 않으면 경고 메시지 파일이 선택되지 않음을 표시합니다.
2. ipfs.add(file)파일을 IPFS에 업로드 중입니다.
3. add메서드는 다음 속성을 반환하며 cid가장 path중요한 속성은 size( 업로드된 파일에 부여된 콘텐츠 식별자 또는 고유한 콘텐츠 식별자) 및 (파일을 표시하는 데 사용할)입니다.mtimecidpath
4. 새 파일을 추가하여 이미지 상태를 업데이트합니다.

구성 요소의 시작 부분에 이 줄을 추가합니다.

 

 const [images, setImages] = useState([])

IPFS에서 업로드된 파일 표시

우리는 이미 onSubmitHandler 함수에 논리를 구현했습니다. 이제 jsx에서 이 논리를 사용
하여 파일을 표시하는 템플릿을 추가하고 Infura API 키에서 전용 게이트웨이 도메인 링크를 마지막으로 복사하고 교체할 작업을 하나 더 추가합니다. dedicated-gateway-link. _

 

<div>
        {images.map((image, index) => (
          <img
          alt={`Uploaded #${index + 1}`}
          src={"<dedicated-gateway-link>/ipfs/" + image.path}
            style={{ maxWidth: "400px", margin: "15px" }}
            key={image.cid.toString() + index}
          />
        ))}
      </div>

이제 이 Github 저장소 에서 전체 코드를 확인할 수 있는 모든 것을 성공적으로 구현 했습니다.

 

블록체인 공부가 필요하면  아래클릭

https://www.youtube.com/watch?v=tQ9DLI-0tC8&t=7s

https://www.youtube.com/watch?v=UVayl0CiFT8&t=11s

 

수업

https://gamecamp.liveklass.com/classes/116047

블록체인 Dapp 사이트 따라만들기