如何将二进制PNG文件加载到Blob中用于Confluence API上传？

浏览器端实现 #

场景1：从本地文件选择器获取PNG

直接使用用户选择的File对象（File是Blob的子类，无需额外转换）构建FormData：

// 页面需有文件选择控件：<input type="file" id="pngUpload" accept="image/png">
const fileInput = document.getElementById('pngUpload');
fileInput.addEventListener('change', async () => {
  const selectedFile = fileInput.files[0];
  if (!selectedFile || selectedFile.type !== 'image/png') return;

  // 构建符合Confluence API要求的FormData
  const formData = new FormData();
  formData.append('file', selectedFile, selectedFile.name); // 文件字段
  formData.append('comment', '新增PNG附件'); // 可选：附件说明
  formData.append('minorEdit', 'true'); // 可选：标记为小编辑，不触发通知

  // 发送上传请求到Confluence API
  const uploadResponse = await fetch('https://你的Confluence域名/rest/api/content/页面ID/child/attachment', {
    method: 'POST',
    headers: {
      'Authorization': 'Basic ' + btoa('你的用户名:API令牌')
      // 不要手动设置Content-Type，浏览器会自动添加multipart边界符
    },
    body: formData
  });

  const result = await uploadResponse.json();
  console.log('上传完成', result);
});

场景2：从远程URL加载PNG到Blob

通过fetch加载远程图片并转换为Blob：

async function fetchPngAsBlob(imageUrl) {
  const response = await fetch(imageUrl);
  if (!response.ok) throw new Error('图片加载失败');
  const blob = await response.blob();
  if (blob.type !== 'image/png') throw new Error('目标文件不是PNG格式');
  return blob;
}

// 调用示例
async function uploadRemotePng(pageId, imageUrl) {
  const pngBlob = await fetchPngAsBlob(imageUrl);
  const formData = new FormData();
  formData.append('file', pngBlob, '远程图片.png'); // 自定义文件名
  formData.append('comment', '远程PNG附件');
  formData.append('minorEdit', 'true');

  // 上传逻辑同场景1
  const uploadResponse = await fetch(`https://你的Confluence域名/rest/api/content/${pageId}/child/attachment`, {
    method: 'POST',
    headers: { 'Authorization': 'Basic ' + btoa('你的用户名:API令牌') },
    body: formData
  });

  const result = await uploadResponse.json();
  console.log('上传完成', result);
}

Node.js端实现 #

如果是后端脚本上传本地PNG，可通过fs读取文件并转换为Blob（Node.js 18+原生支持Blob，低版本可直接传Buffer）：

const fs = require('fs').promises;
const FormData = require('form-data');
const fetch = require('node-fetch');

async function loadLocalPngAsBlob(filePath) {
  const fileBuffer = await fs.readFile(filePath);
  return new Blob([fileBuffer], { type: 'image/png' });
}

async function uploadLocalPng(pageId, filePath) {
  const pngBlob = await loadLocalPngAsBlob(filePath);
  const formData = new FormData();
  formData.append('file', pngBlob, '本地附件.png');
  formData.append('comment', '服务器本地PNG附件');
  formData.append('minorEdit', 'true');

  const uploadResponse = await fetch(`https://你的Confluence域名/rest/api/content/${pageId}/child/attachment`, {
    method: 'POST',
    headers: {
      'Authorization': 'Basic ' + Buffer.from('你的用户名:API令牌').toString('base64')
    },
    body: formData
  });

  const result = await uploadResponse.json();
  console.log('上传完成', result);
}

// 执行上传
uploadLocalPng('你的页面ID', './本地图片.png');

关键注意事项 #

• File对象本身就是Blob的实例，无需额外转换可直接加入FormData
• 发送multipart/form-data请求时，不要手动设置Content-Type，浏览器或form-data库会自动添加正确的边界符，否则会导致Confluence API解析失败
• 确保你的账号拥有目标页面的编辑权限，API令牌需从Atlassian账号后台生成
• 对于小于1MB的文件，以上方法性能足够，无需分片处理

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