React集成Dynamic Web TWAIN：扫描后如何向服务器传输文档数据

Dynamic Web TWAIN 提供两种主流上传方式，可根据服务器接收逻辑选择：

一、使用内置HTTP上传API（推荐） #

Dynamic Web TWAIN 自带HTTPUpload系列方法，无需手动处理数据格式，直接调用即可完成上传。

1. 补充服务器上传逻辑 #

在你的saveOrUploadImage函数末尾，添加_type === "server"的处理代码：

// 处理服务器上传逻辑
if (_type === "server") {
  const uploadUrl = "你的服务器上传接口地址";
  const fileName = saveFileName + "." + saveFileFormat;

  if (bMulti) {
    // 多页/多选场景
    if (props.selected.length === 1 || props.selected.length === props.buffer.count) {
      // 上传所有图像为多页文件
      switch (saveFileFormat) {
        case "tif":
          DWObject.HTTPUploadAllAsMultiPageTIFF(uploadUrl, fileName, onSuccess, onFailure);
          break;
        case "pdf":
          DWObject.HTTPUploadAllAsPDF(uploadUrl, fileName, onSuccess, onFailure);
          break;
        default:
          // 单页格式逐个上传
          for (let i = 0; i < props.buffer.count; i++) {
            const singleFileName = fileName.replace(".", `_${i}.`);
            DWObject.HTTPUpload(uploadUrl, singleFileName, i, fileType, onSuccess, onFailure);
          }
          break;
      }
    } else {
      // 上传选中的图像为多页文件
      switch (saveFileFormat) {
        case "tif":
          DWObject.HTTPUploadSelectedImagesAsMultiPageTIFF(uploadUrl, fileName, onSuccess, onFailure);
          break;
        case "pdf":
          DWObject.HTTPUploadSelectedImagesAsMultiPagePDF(uploadUrl, fileName, onSuccess, onFailure);
          break;
        default:
          // 逐个上传选中的单页图像
          props.selected.forEach((index, idx) => {
            const singleFileName = fileName.replace(".", `_${idx}.`);
            DWObject.HTTPUpload(uploadUrl, singleFileName, index, fileType, onSuccess, onFailure);
          });
          break;
      }
    }
  } else {
    // 单页场景直接上传
    DWObject.HTTPUpload(uploadUrl, fileName, props.buffer.current, fileType, onSuccess, onFailure);
  }
}

2. 服务器接收示例（Node.js） #

服务器需支持接收multipart/form-data格式文件，示例代码：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('RemoteFile'), (req, res) => {
  console.log('上传文件信息:', req.file);
  res.status(200).send('上传成功');
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

二、自定义上传（Blob/Base64格式） #

若需自定义请求头、参数，可先将图像转为Blob或Base64，再用fetch/axios发送请求。

1. Blob格式上传 #

// 单页图像转Blob并上传
DWObject.ConvertToBlob([props.buffer.current], fileType, (blob) => {
  const formData = new FormData();
  formData.append('file', blob, fileName);

  fetch('你的服务器上传接口', {
    method: 'POST',
    body: formData
  }).then(res => res.json())
    .then(() => {
      props.handleOutPutMessage(fileName + " uploaded successfully!", "important");
      setSaveFileName((new Date()).getTime().toString());
    }).catch(err => {
      props.handleException({ message: err.toString() });
    });
}, onFailure);

// 多页图像转Blob（仅TIFF/PDF）
if (saveFileFormat === 'pdf' || saveFileFormat === 'tif') {
  DWObject.ConvertAllToBlob(fileType, (blob) => {
    const formData = new FormData();
    formData.append('file', blob, fileName);

    fetch('你的服务器上传接口', {
      method: 'POST',
      body: formData
    }).then(res => res.json())
      .then(() => {
        props.handleOutPutMessage(fileName + " uploaded successfully!", "important");
        setSaveFileName((new Date()).getTime().toString());
      }).catch(err => {
        props.handleException({ message: err.toString() });
      });
  }, onFailure);
}

2. Base64格式上传 #

DWObject.GetImageBase64(props.buffer.current, fileType, (base64Str) => {
  // 去除Base64前缀（如"data:image/jpeg;base64,"）
  const base64Data = base64Str.split(',')[1];
  
  fetch('你的服务器上传接口', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      fileName: fileName,
      data: base64Data
    })
  }).then(res => res.json())
    .then(() => {
      props.handleOutPutMessage(fileName + " uploaded successfully!", "important");
      setSaveFileName((new Date()).getTime().toString());
    }).catch(err => {
      props.handleException({ message: err.toString() });
    });
}, onFailure);

三、现有代码补充说明 #

你的当前代码仅收集了imagesToUpload，但未执行实际上传操作，需将上述上传逻辑补充到函数末尾。另外，保留你现有fileType的循环判断逻辑，确保其与saveFileFormat匹配即可。

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