如何在React中用Buffer将PNG编码为Base64并上传至Arweave？

问题分析 #

你的代码存在两个核心问题：

• 浏览器环境无Buffer对象：Buffer是Node.js专属API，浏览器默认不支持，直接调用会抛出ReferenceError。
• 数据格式错误：你将图片转成Base64字符串传给Arweave，但createTransaction的data字段若传入字符串，会被当作文本处理，最终上传的不是图片二进制数据，而是Base64编码后的文本内容。

修正后的代码方案 #

方案1：直接使用二进制数据上传（推荐）

无需转Base64，直接将图片的二进制数据（Uint8Array）传给Arweave，既避免Buffer问题，又减少数据体积：

const [imageData, setImageData] = useState(null);

useEffect(() => {
  const loadImage = async () => {
    const response = await fetch('./assets/ohr2.png');
    // 获取原始二进制数据（Uint8Array）
    const arrayBuffer = await response.arrayBuffer();
    setImageData(new Uint8Array(arrayBuffer));
  };
  loadImage();
}, []);

// 点击上传函数
const handleUpload = async () => {
  if (!imageData) return;
  const transaction = await arweave.createTransaction(
    { data: imageData },
    arweaveKey
  );
  // 可选：添加图片类型标签，方便后续识别
  transaction.addTag('Content-Type', 'image/png');
  await arweave.transactions.sign(transaction, arweaveKey);
  await arweave.transactions.post(transaction);
};

方案2：如果必须使用Base64（不推荐）

如果业务场景确实需要Base64，可使用浏览器原生API替代Buffer，再将Base64转回二进制数据传给Arweave：

const [imageBase64, setImageBase64] = useState(null);

useEffect(() => {
  const loadImage = async () => {
    const response = await fetch('./assets/ohr2.png');
    const blob = await response.blob();
    // 用FileReader将Blob转成Base64
    const reader = new FileReader();
    reader.onloadend = () => {
      // 去掉dataURL前缀（data:image/png;base64,）
      const base64 = reader.result.split(',')[1];
      setImageBase64(base64);
    };
    reader.readAsDataURL(blob);
  };
  loadImage();
}, []);

// 点击上传函数
const handleUpload = async () => {
  if (!imageBase64) return;
  // 将Base64转回Uint8Array
  const binaryString = atob(imageBase64);
  const uint8Array = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    uint8Array[i] = binaryString.charCodeAt(i);
  }
  const transaction = await arweave.createTransaction(
    { data: uint8Array },
    arweaveKey
  );
  transaction.addTag('Content-Type', 'image/png');
  await arweave.transactions.sign(transaction, arweaveKey);
  await arweave.transactions.post(transaction);
};

关键说明 #

• 优先选择方案1，直接传递二进制数据效率更高，无需额外编码解码步骤。
• 务必为交易添加Content-Type标签，这样Arweave返回数据时才能被正确识别为图片。
• 确保arweaveKey已正确加载，且拥有足够的AR余额用于支付交易手续费。

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