动态吐温API调用与React Js的集成

Question

我在React js中使用动态Web TWAIN。用户扫描文档后，本地保存文件工作正常，但我不知道从DynamicWebTWAIN向服务器发送哪种文档数据。

我试过了，

这是我的保存按钮逻辑。

const saveOrUploadImage = (_type) => {
if (_type !== "local" && _type !== "server") return;
let fileName = saveFileName + "." + saveFileFormat;
let imagesToUpload = [];
let fileType = 0;
let onSuccess = () => {
setSaveFileName((new Date()).getTime().toString());
imagesToUpload.push(props.buffer.current);
_type === "local" ? props.handleOutPutMessage(fileName + " saved successfully!", "important") : props.handleOutPutMessage(fileName + " uploaded successfully!", "important");
};
let onFailure = (errorCode, errorString, httpResponse) => {
(httpResponse && httpResponse !== "") ? props.handleOutPutMessage(httpResponse, "httpResponse") : props.handleException({ code: errorCode, message: errorString });
};
if (bMulti) {
if (props.selected.length === 1 || props.selected.length === props.buffer.count) {
if (_type === "local") {
switch (saveFileFormat) {
default: break;
case "tif": DWObject.SaveAllAsMultiPageTIFF(fileName, onSuccess, onFailure); break;
case "pdf": DWObject.SaveAllAsPDF(fileName, onSuccess, onFailure); break;
}
}
else {
for (let i = 0; i < props.buffer.count; i++)
imagesToUpload.push(i);
}
} else {
if (_type === "local") {
switch (saveFileFormat) {
default: break;
case "tif": DWObject.SaveSelectedImagesAsMultiPageTIFF(fileName, onSuccess, onFailure); break;
case "pdf": {
DWObject.SaveAsPDF(fileName, props.buffer.current, onSuccess, onFailure)
console.log('GetImageURL', Dynamsoft.DWT.GetImageURL(props.buffer.current));
console.log("DWObject.SaveAllAsPDF()---", DWObject.SaveAllAsPDF(fileName, props.buffer.current, onSuccess, onFailure));
console.log("DWObject---", DWObject);
DWObject.SaveSelectedImagesAsMultiPagePDF(fileName, onSuccess, onFailure)
}; break;
}
}
else {
imagesToUpload = props.selected;
}
}
} else {
if (_type === "local") {
switch (saveFileFormat) {
default: break;
case "bmp": DWObject.SaveAsBMP(fileName, props.buffer.current, onSuccess, onFailure); break;
case "jpg": DWObject.SaveAsJPEG(fileName, props.buffer.current, onSuccess, onFailure); break;
case "tif": DWObject.SaveAsTIFF(fileName, props.buffer.current, onSuccess, onFailure); break;
case "png": DWObject.SaveAsPNG(fileName, props.buffer.current, onSuccess, onFailure); break;
case "pdf": {
DWObject.SaveAsPDF(fileName, props.buffer.current, onSuccess, onFailure)      
}; break;
}
imagesToUpload.push(props.buffer.current);
console.log("props.buffer.current", props.buffer.current); //0
}

}
for (let o in Dynamsoft.DWT.EnumDWT_ImageType) {

if (o.toLowerCase().indexOf(saveFileFormat) !== -1 && Dynamsoft.DWT.EnumDWT_ImageType[o] < 7) {
fileType = Dynamsoft.DWT.EnumDWT_ImageType[o];
break;
}
}
}

我正在关注这个GitHub存储库。GitHub链接

如果你知道这个问题的答案，请告诉我该怎么办。

Answer 1

上传文件的步骤：

1. 初始化文件上传程序：

   Dynamsoft.FileUploader.Init("", (objFileUploader) => {
   fileUploaderManager = objFileUploader;
   if (!fileUploaderReady) {
   fileUploaderReady = true;
   props.handleStatusChange(128);
   }
   }, (errorCode, errorString) => {
   props.handleException({ code: errorCode, message: errorString });
   if (!fileUploaderReady) {
   fileUploaderReady = true;
   props.handleStatusChange(128);
   }
   });
   

2. 配置目标文件，包括文件名和文件类型：

   let protocol = Dynamsoft.Lib.detect.ssl ? "https://" : "http://"
   let _strPort = 2020;
   let strActionPage = "/upload";
   let serverUrl = protocol + window.location.hostname + ":" + _strPort + strActionPage;
   if (bUseFileUploader) {
   var job = fileUploaderManager.CreateJob();
   job.ServerUrl = serverUrl;
   job.FileName = fileName;
   job.ImageType = fileType;
   DWObject.GenerateURLForUploadData(imagesToUpload, fileType, (resultURL, newIndices, enumImageType) => {
   job.SourceValue.Add(resultURL, fileName);
   job.OnUploadTransferPercentage = (job, sPercentage) => {
   props.handleOutPutMessage("Uploading...(" + sPercentage + "%)");
   };
   job.OnRunSuccess = (job) => { onSuccess() };
   job.OnRunFailure = (job, errorCode, errorString) => onFailure(errorCode, errorString);
   fileUploaderManager.Run(job);
   }, (errorCode, errorString, strHTTPPostResponseString, newIndices, enumImageType) => {
   props.handleException({ code: errorCode, message: errorString });
   });
   } 
   

3. 将文件上载到服务器。

   DWObject.GenerateURLForUploadData(imagesToUpload, fileType, (resultURL, newIndices, enumImageType) => {
   job.SourceValue.Add(resultURL, fileName);
   job.OnUploadTransferPercentage = (job, sPercentage) => {
   props.handleOutPutMessage("Uploading...(" + sPercentage + "%)");
   };
   job.OnRunSuccess = (job) => { onSuccess() };
   job.OnRunFailure = (job, errorCode, errorString) => onFailure(errorCode, errorString);
   fileUploaderManager.Run(job);
   }, (errorCode, errorString, strHTTPPostResponseString, newIndices, enumImageType) => {
   props.handleException({ code: errorCode, message: errorString });
   });
   

除了文件上传器，您还可以调用HTTPUpload()方法：

DWObject.HTTPUpload(serverUrl, imagesToUpload, fileType, Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, fileName, onSuccess, onFailure);