如何用Node.js将Forge Viewer截图的Blob URL存至服务器并转可传输URL

前端处理：将Blob URL转换为文件并上传 #

Viewer.screenshot()返回的Blob URL仅能在当前浏览器上下文访问，无法直接被服务器读取，需要先在前端把Blob内容提取出来，通过FormData上传到Node.js后端：

// 调用Viewer截图方法
viewer.screenshot({ quality: 0.8 })
  .then(async (blobUrl) => {
    // 从Blob URL获取Blob对象
    const response = await fetch(blobUrl);
    const blob = await response.blob();
    // 创建FormData并添加文件
    const formData = new FormData();
    formData.append('screenshot', blob, 'viewer-screenshot.png'); // 指定文件名与格式
    // 上传至后端接口
    const uploadResponse = await fetch('/api/upload-screenshot', {
      method: 'POST',
      body: formData
    });
    const result = await uploadResponse.json();
    console.log('可访问的图片URL:', result.imageUrl);
  })
  .catch(err => console.error('截图或上传失败:', err));

Node.js后端处理：接收文件并生成可访问URL #

使用Express框架配合multer中间件处理文件上传，将文件保存到服务器静态目录后，生成对外可访问的URL：

1. 安装依赖 #

npm install express multer

2. 后端代码示例 #

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const app = express();

// 配置multer的文件存储规则
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 确保uploads目录存在，不存在则自动创建
    const uploadDir = path.join(__dirname, 'uploads');
    fs.mkdirSync(uploadDir, { recursive: true });
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    // 生成唯一文件名，避免文件覆盖
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `screenshot-${uniqueSuffix}.png`);
  }
});

const upload = multer({ storage: storage });

// 配置静态文件服务，让uploads目录下的文件可通过URL访问
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

// 上传接口
app.post('/api/upload-screenshot', upload.single('screenshot'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: '未接收到图片文件' });
  }
  // 生成可公开访问的图片URL
  const imageUrl = `${req.protocol}://${req.get('host')}/uploads/${req.file.filename}`;
  res.json({ imageUrl });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

关键说明 #

• 前端必须读取Blob内容后上传，因为Blob URL是浏览器内部临时地址，服务器无法直接访问。
• 后端通过multer处理FormData格式的文件上传，将文件存入静态目录后，借助Express的静态文件服务对外提供访问路径。
• 生成唯一文件名是为了避免不同截图的文件覆盖问题，保证每个截图都有独立存储路径。

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