Javascript
無法使用 ipfs-http-client 將圖像上傳到 IPFS
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.add
just替換,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 } }