Forge Viewer 上传与转换进度查看及进度条实现方案咨询

首先明确：文件上传、模型转换进度查询属于Forge平台服务端接口能力，Forge Viewer本身仅负责模型加载完成后的渲染逻辑，进度展示功能需要对接Forge服务端接口，结合前端UI组件自主实现，整体分为两个独立环节落地：

1. 文件上传进度实现 #

• 前端直传OSS场景：直接监听XMLHttpRequest的progress事件，通过已上传字节数和总字节数计算进度百分比，同步更新进度条UI即可，参考代码如下：

const xhr = new XMLHttpRequest();
// 监听上传进度事件
xhr.upload.addEventListener('progress', (e) => {
  if (e.lengthComputable) {
    const uploadPercent = Math.round((e.loaded / e.total) * 100);
    // 此处更新你的进度条组件值
  }
});
xhr.open('PUT', 你的OSS上传地址, true);
xhr.send(要上传的文件对象);

• 后端中转上传场景：可通过轮询接口、WebSocket推送两种方式，由后端同步当前文件接收进度给前端，再更新进度条即可。

2. 模型转换（SVF加工）进度实现 #

该环节依赖Forge Model Derivative服务的状态查询能力，通过轮询接口获取转换进度：

• 调用POST job接口触发模型转换后，拿到对应文件的urn标识，以1-3秒为间隔定时调用GET :urn/manifest接口查询转换状态
• 接口返回的progress字段会直接返回百分比格式的进度值（例："progress": "75%"），status字段会返回pending/inprogress/success/failed四种状态
• 每次请求拿到进度值后同步更新进度条，直到status变为success或failed时终止轮询，转换失败可提取返回包中的错误信息展示给用户
• 参考代码如下：

// 轮询获取转换进度的方法
async function pollConversionProgress(urn, updateCallback) {
  const resp = await fetch(`/你的后端代理接口/manifest?urn=${urn}`);
  const manifest = await resp.json();
  if (['pending', 'inprogress'].includes(manifest.status)) {
    const progressVal = parseInt(manifest.progress.replace('%', '')) || 0;
    updateCallback(progressVal, 'processing');
    // 2秒后再次轮询
    setTimeout(() => pollConversionProgress(urn, updateCallback), 2000);
  } else if (manifest.status === 'success') {
    updateCallback(100, 'success');
    // 此处可触发Forge Viewer加载模型的逻辑
  } else {
    updateCallback(0, 'failed', manifest?.error || '转换失败');
  }
}

3. 进度条UI集成 #

• 可直接使用原生HTML的<progress>标签，或匹配你当前前端技术栈（Vue/React/Angular等）的UI组件库进度条组件，将上述两个环节的进度值绑定到组件即可
• 若需要合并展示全流程进度，可自定义权重分配：比如上传环节占总进度的40%，转换环节占总进度的60%，两个环节的进度加权计算后作为整体进度展示

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