Ipfs
從 HTML 頁面上傳文件到 IPFS
我正在嘗試將文件從 HTML 頁面上傳到 IPFS，下面是我的程式碼，但我遇到了錯誤。
Uncaught ReferenceError: Buffer is not defined我已導入以下語句
<script src="https://unpkg.com/ipfs-api/dist/index.min.js"></script> src="https://unpkg.com/ipfs/dist/index.min.js" src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js" src="https://unpkg.com/ipfs/dist/index.js" src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.js" src="https://unpkg.com/ipfs-api/dist/index.js" src="https://unpkg.com/ipfs-api@9.0.0/dist/index.js" integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB" crossorigin="anonymous" <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/ipfs-api/dist/index.min.js"></script> <!-- loading the human-readable (not minified) version --> <!-- loading the minified version --> <script src="https://unpkg.com/ipfs/dist/index.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script> <!-- loading the human-readable (not minified) version --> <script src="https://unpkg.com/ipfs/dist/index.js"></script> <script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.js"></script> <script src="https://unpkg.com/ipfs-api/dist/index.js"></script> <script src="https://unpkg.com/ipfs-api@9.0.0/dist/index.js" integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB" crossorigin="anonymous"></script> </head> <body> <form action="/"> <fieldset> <legend></legend> <input type="file" name="photo" id="photo"> <button type="button" onclick="upload()"></button> </fieldset> </form> </br> </br> <a id="url"></a> </br> </br> <img id="output"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script type="text/javascript"> function upload() { console.log("hi"); const reader = new FileReader(); reader.onloadend = function() { console.log("2"); const ipfs = window.IpfsApi('localhost', 5001) // Connect to IPFS console.log("3"); const buf = buffer.Buffer(reader.result) // Convert data into buffer console.log("4"); ipfs.files.add(buf, (err, result) => { // Upload buffer to IPFS console.log("5"); if(err) { console.error(err) return } let url = 'https://ipfs.io/ipfs/${result[0].hash}' console.log('Url --> ${url}') document.getElementById("url").innerHTML= url document.getElementById("url").href= url document.getElementById("output").src = url }) } const photo = document.getElementById("photo"); reader.readAsArrayBuffer(photo.files[0]); // Read Provided File } </script> </body> </html>
Buffer 不是標準的 JavaScript 類型，你需要導入它。請參閱 Buffer 模組 – http://npmjs.com/buffer – 以了解如何或在 js-ipfs 儲存庫中查看將文件添加到 IPFS 的完整範例
https://github.com/ipfs/js-ipfs/tree/master/examples/exchange-files-in-browser
將您的腳本放在一個單獨的文件中，並使用browserify將 node.js 緩衝區庫轉換為瀏覽器可以理解的內容。
browserify index.js -o bundle.js然後你的程式碼應該可以工作：
const buffer = Buffer.from(reader.result) ipfs.add(buffer) .then(files => { console.log(files) })