HTML对接IPFS实现文件上传遇模块导入错误求助

问题分析 #

你用CDN引入ipfs-http-client时，错误混淆了CommonJS和ES模块的用法，同时误将ipfs-http-client的API当成了本地IPFS节点的API（IPFS.create()是本地节点库ipfs的方法，而非ipfs-http-client），导致出现导出错误和实例创建失败。

解决方案 #

方案1：使用UMD格式CDN（无需模块类型） #

修改代码如下：

TEST.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IPFS File Upload</title>   
    <script src="https://unpkg.com/ipfs-http-client@60.0.1/dist/index.min.js"></script>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="uploadButton">Upload File to IPFS</button>
    <div id="result"></div>

    <script src="./js/TEST.js"></script>
</body>
</html>

TEST.js

document.addEventListener('DOMContentLoaded', async () => {
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadButton');
    const resultDiv = document.getElementById('result');

    // 连接公共IPFS节点（或本地节点http://localhost:5001，需先启动本地IPFS服务）
    const ipfs = IpfsHttpClient.create({ url: 'https://ipfs.infura.io:5001/api/v0' });

    uploadButton.addEventListener('click', async () => {
        const file = fileInput.files[0];

        if (!file) {
            alert('请选择要上传的文件');
            return;
        }

        try {
            const { cid } = await ipfs.add(file);
            const ipfsUrl = `https://ipfs.io/ipfs/${cid.toString()}`;
            resultDiv.innerHTML = `<p>IPFS地址：<a href="${ipfsUrl}" target="_blank">${ipfsUrl}</a></p>`;
        } catch (error) {
            console.error('上传IPFS失败:', error);
            resultDiv.innerHTML = '<p>上传IPFS失败，请检查节点连接后重试</p>';
        }
    });
});

方案2：使用ES模块格式CDN（保留module类型） #

如果想继续使用type="module"，改用ES模块版本的CDN：

TEST.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IPFS File Upload</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="uploadButton">Upload File to IPFS</button>
    <div id="result"></div>

    <script type="module" src="./js/TEST.js"></script>
</body>
</html>

TEST.js

import { create } from 'https://unpkg.com/ipfs-http-client@60.0.1/dist/index.esm.min.js';

document.addEventListener('DOMContentLoaded', async () => {
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadButton');
    const resultDiv = document.getElementById('result');

    const ipfs = create({ url: 'https://ipfs.infura.io:5001/api/v0' });

    uploadButton.addEventListener('click', async () => {
        const file = fileInput.files[0];

        if (!file) {
            alert('请选择要上传的文件');
            return;
        }

        try {
            const { cid } = await ipfs.add(file);
            const ipfsUrl = `https://ipfs.io/ipfs/${cid.toString()}`;
            resultDiv.innerHTML = `<p>IPFS地址：<a href="${ipfsUrl}" target="_blank">${ipfsUrl}</a></p>`;
        } catch (error) {
            console.error('上传IPFS失败:', error);
            resultDiv.innerHTML = '<p>上传IPFS失败，请检查节点连接后重试</p>';
        }
    });
});

关键说明 #

• ipfs-http-client是用来连接远程IPFS节点的客户端库，不是创建本地节点的库，所以不能用IPFS.create()，而是用IpfsHttpClient.create()指定节点地址。
• 公共节点可以选择Infura、Pinata等提供的节点，也可以自己启动本地IPFS服务（默认地址http://localhost:5001）。
• UMD格式的CDN会将IpfsHttpClient挂载到全局window对象，ES模块格式则需要用import导入对应方法。

内容的提问来源于stack exchange，提问作者Phantom