如何在FineUploader中预处理文件期间显示进度？

Question

我在使用FineUploader（到Azure）上传文件时对文件应用了一些预处理。具体地说，这意味着计算文件的MD5哈希并可能编辑字节的某些特定元素。我已实现此操作并将我的代码附加到onSubmit event。

不幸的是，这个过程可能需要花费很多时间，用户通常会同时提交18到2000个文件。 FineUploader不会将它们添加到UI中，也不会在此阶段显示进度，让我的用户处于黑暗状态。他们会添加更多文件，认为他们做错了什么，并做出其他不正确的决定。

我已经打算使用Web工作人员队列进行处理，但这只会使用户界面更具响应性，它不会帮助向用户显示一些反馈。我想知道是否应该切换到onValidate之类的其他事件，或者我是否可以考虑采用其他方法。你觉得怎么样？

Answer 1

显示进度很容易。我在模板中添加了以下HTML：

<span class="preprocessing-selector qq-drop-processing qq-hide">
    <span>Pre-processing files...</span>
    <span class="preprocessing-spinner-selector qq-drop-processing-spinner"></span>
</span>

在我自定义处理的onFinish处理程序中，我添加了$(".preprocessing-selector").addClass("qq-hide");，并将$(".preprocessing-selector").removeClass("qq-hide");添加到了FineUploader的onSubmit处理程序中。

这足以表明进展。

对于那些有兴趣了解我如何将预处理添加到管道中的人，这里是概述和解释。据我所知，我们的初步测试结果没有性能问题。

我使用了一个名为workcrew.js的要点，并应用了一些更改来将其用于我的目的。它管理Web Workers池并提供简单的API。我使用onFinish事件来隐藏进度指示器。

每当提交文件时，我都会将其传递给workcrew.js进行预处理，并将承诺返回给FineUploader。工作者返回MD5哈希值，如果需要预处理，则返回修改后的File对象及其新的MD5哈希值。

• 如果我们之前（重复）看过这个MD5哈希，我们会拒绝承诺。
• 如果我们获得了修改后的File对象，我们会拒绝承诺并使用addUploads提交新文件。
• 否则，我们将MD5哈希设置为受益于Azure的MD5哈希验证机制并解决承诺。

一个问题：在向workcrew.js发送文件时，您必须确保使用unshiftWork而不是pushWork，以便首先处理已重新提交的已处理文件。这样处理和上传同时发生。否则，您将首先处理所有提交的文件，然后上传，效率会降低。