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

Question

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

不幸的是，这个过程可能需要相当长的时间，而且用户通常同时提交 18 到 2000 个文件。 FineUploader 不会将它们添加到 UI 中，也不会在此阶段显示进度，让我的用户一无所知。 他们会添加更多文件，认为他们做错了什么，并做出其他错误的决定。

我已经打算使用 Web 工作者队列进行处理，但这只会使 UI 更具响应性，它无助于向我的用户显示一些反馈。 我想知道是否应该切换到不同的事件，例如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 返回一个 promise。 工作人员返回 MD5 哈希值，如果需要预处理，则返回修改后的File对象及其新的 MD5 哈希值。

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

一个陷阱：你必须确保使用unshiftWork代替pushWork发送文件到workcrew.js时，使已重新提交处理的文件被优先处理。 这样处理和上传是同时发生的。 否则，您将首先处理所有提交的文件，然后再上传，这会降低效率。