Javascript

無法使用 ipfs-http-client 將圖像上傳到 IPFS

  • September 18, 2021

ipfs-http-client切換到from後,我在將圖像上傳到 IPFS 時遇到問題ipfs-api。這是我的頁面程式碼目前的樣子:

import ipfs from "../utils/ipfs";

export default function NewReview() {

   const [ipfsHash, setIpfsHash] = useState("");
   const [buffer, setBuffer] = useState(null);
   const [isFile, setFile] = useState(null);

   function getHash() {
       ipfs.files.add(Buffer.from(buffer), (error, result) => {
           if (error) {
               console.error(error)
               return
           }
           setIpfsHash(result[0].hash);
   });
   }

   useEffect(() => {
       if (buffer) {
           getHash()
       }
   });

   const captureFile = (event) => {
       if (event.target.files[0]) {
           event.preventDefault();
           setFile(URL.createObjectURL(event.target.files[0]));
       
           const reader = new FileReader();
           reader.readAsArrayBuffer(event.target.files[0])
           reader.addEventListener("load", () => {
                   setBuffer(reader.result)
           })
       }
   }

// skipping a bit to where the image is uploaded

<div>
   <img src={isFile} alt="" style={{ maxWidth: '400px' }} />
   <input type="file" onChange={captureFile} />
</div>

// I don't think the rest is relevant

這些圖像旨在通過智能合約功能保存到區塊鏈中,並應顯示在另一個頁面上,如下所示:

// other code
<li className="list-group-item">
   <img src={ `https://ipfs.io/ipfs/${review.ipfsHash}` } alt="" />
</li>

ipfs.js看起來像:

const { create } = require('ipfs-http-client');
const ipfs = create({host: 'ipfs.infura.io', port: 5001, protocol: 'https'});

export default ipfs;

當我使用ipfs-api上面的程式碼時,它可以正常工作。但是ipfs-http-client我不能使用ipfs.files.add,因為我得到一個TypeError: default.files.add is not a function錯誤。

我試過用ipfs.files.addjust替換,ipfs.add但這不起作用,即使我將緩衝區放在 JavaScript 對像中,因為ipfs.add我建議我這樣做。當我查看控制台時,我什至似乎都沒有收到任何錯誤消息,它似乎不起作用,而且ipfsHash只是一個空字元串(就像原始狀態一樣)。

我真的很感激你的想法和建議!甚至沒有在控制台中出現任何錯誤,我不確定錯誤是什麼以及如何ipfs-http-client將圖像文件保存到 IPFS,就像我過去的程式碼一樣成功。

我找到了解決問題的方法!

看起來ipfs-http-client,您需要將其用作函式的ipfs.add一部分才能實際執行。如果沒有它在一個函式中,它在執行時根本沒有做任何事情。async/await``ipfs.add``async/await``getHash()

這就是我改變的方式getHash()

async function getHash() {
   
   try {
       const uploadResult = await ipfs.add(Buffer.from(buffer))
       setIpfsHash(uploadResult.path)
   } catch(e) {
       console.log(e)
       toast.error(e.message)
       return
   }
}

引用自:https://ethereum.stackexchange.com/questions/110104