使用Javascript和PHP通过nft.storage向IPFS上传并正确显示图片的问题

你当前上传到nft.storage的内容是base64编码后的字符串，平台会将其识别为普通文本存储，IPFS网关返回资源时会携带text/plain的MIME头，浏览器自然会按文本渲染，不会识别为图片。

你需要将原始图片二进制流上传到平台，同时指定正确的图片MIME类型，修改后的代码如下：

PHP 部分调整 #

<?php
// 读取图片原始二进制内容
$image_raw = file_get_contents($image_original_path); 
// 自动获取图片MIME类型，避免手动填错
$image_mime = mime_content_type($image_original_path);
// 转base64方便前端传输，后续前端会转回二进制
$encdata = base64_encode($image_raw);
?>

JS 部分调整 #

document.getElementById("test").addEventListener("click", function() {
    // base64转二进制Blob工具方法
    function base64ToBlob(base64Str, mimeType) {
        const byteChars = atob(base64Str);
        const byteArr = [];
        for (let i = 0; i < byteChars.length; i++) {
            byteArr.push(byteChars.charCodeAt(i));
        }
        return new Blob([new Uint8Array(byteArr)], { type: mimeType });
    }

    // 生成图片Blob对象
    const imageBlob = base64ToBlob("<?php echo $encdata; ?>", "<?php echo $image_mime; ?>");

    jQuery.ajax({
        type: 'POST',
        url: 'https://api.nft.storage/upload',
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Authorization", "Bearer 替换为你的nft.storage密钥")
        },
        contentType: "<?php echo $image_mime; ?>",
        cache: false,
        processData: false,
        data: imageBlob, // 直接传二进制Blob，而非base64字符串
        success: function(data) {
          console.log(data);
          // 后续业务逻辑
        },
        error: function(data) {
            console.log(data);
       } 
    });
});

不要把nft.storage的密钥直接写在前端JS代码中，所有访问你页面的用户都可以直接获取到密钥，会导致你的存储资源被恶意滥用。建议把上传逻辑迁移到后端PHP实现，前端仅调用你自己的后端接口完成上传。

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