FineUploader如何在文件预处理过程中显示进度？

Question

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

不幸的是，这个过程可能会花费很多时间，而且用户通常同时提交 18 到 2000 个文件。 FineUploader 不会将它们添加到 UI 中，也不会在这个阶段显示进度，让我的用户蒙在鼓里。他们会添加更多文件，认为他们做错了什么，并做出其他错误的决定。

我已经打算用网络工作者队列进行处理，但这只会使 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");，并在 FineUploader 的 onSubmit 处理程序中添加了 $(".preprocessing-selector").removeClass("qq-hide");。

这足以表明进展。

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

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

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

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

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

FineUploader如何在文件预处理过程中显示进度？

How to show progress during preprocessing of files in FineUploader?

javascript

azure

fine-uploader