文章中涉及的源代码在GitHub上,检查源代码。
这是一个可以以常规方式设置的节点项目。如果已经有一个项目,则可以继续执行该项目。根本没有问题。如果这是一个新开始,请执行以下操作:
现在,让我们了解该系统的工作原理。该应用程序有两个过程,需要服务器和客户端之间的严格协调。
还有第四端点,用于获取要处理的所有文件键以恢复上传以防止上传停止并希望在几天后恢复。对于本教程,一旦上传并获得ID,它将保留在上面客户端还原它们,但是如果关闭浏览器选项卡,ID将会丢失并且不会恢复。
这里的客户端主要是Web应用程序。该项目的HTML非常简单。修改文件,下面的核心代码。
这里的重要详细信息是,该属性必须具有允许用户选择多个文件的属性,并且您还可以选择允许属性标识的文件类型的类型以允许上传。
有关上传的文件,请获取传递属性的元素对象,然后将其绑定到事件中以收听用户文件的选择。
以下代码定义了该方法:
上面的代码返回一个接受文件列表的函数和要处理上传的可选选项对象。涉及的三个API点点如下:
调整了每个阶段或上传状态的选项(暂停,进度,错误和完成)。启动字节是从哪个位置上传到文件流的位置。该文件是识别文件的一种方法。
文件上传UI/UX处理在服务器上设置上传点之前,最好在客户端上处理它,因为它将帮助服务器端更有意义。
对于这一部分,您需要处理UI。该部分可以使用任何UI库或框架(例如Vue and Angular)轻松完成。
与函数类似,您需要进行交互和更新UI.T是一个获取文件列表并调用的函数,然后通过在页面主体中的每个文件元素中添加每个文件元素来设置视图来设置视图。
在内部,它还具有所有回调函数来跟踪和响应每个文件状态。
调用事件侦听器中的文件列表。
现在要做的一件事是清除该值,以便浏览器不会阻止用户添加更多文件。因此,您可以返回该功能来处理上传。
文件上传逻辑返回到该函数,循环文件列表并调用请求初始化。在启动请求后,将返回对象。返回对象是公共函数。当调用文件调用函数集时。
由于可以同时上传多个文件,因此定义(与地图相比,密钥名称为弱参考,可以任意地使用密钥值,可以通过垃圾回收密钥名称的目标)以跟踪所有文件。
该功能只需让服务器知道它应该上传并提供文件名即可。
服务器使用文件响应后,它将更新函数并使用请求选项创建文件请求记录以准备遵循-up评论。一旦设置了这些文件,它将随附文件和更新选项,该选项将为在实际处理中上传。
在这里,首先初始化表单数据和请求,然后从启动字节节点剪切文件。
该文件是一种允许其切片文件字节的类型。这就是如何跟踪上传文件服务器的哪个点将负责将文件一一放在一起。
然后,块的名称(即文件)和要与服务器通信的文件,并通过设置要发送的表单数据来设置这些属性。
使用时,您需要打开请求,在此处设置帖子请求,并设置一些头部信息。
设置请求后,将传输事件和文件斑点的选项设置为映射以上传输入事件。
我需要做的下一步是使用feefmap中的实际请求来更新文件请求并发送表单数据。
上传逻辑的文件恢复的逻辑要简单得多。在这里,您需要做的是从弱映射获取文件请求,并将文件和名称作为查询参数传递给服务器以查询文件的上传状态。
在状态(先前已上传的总数)之后,该功能被调用以提供启动上传的字节。
该文件在上传文件时可能是错误的,以上传逻辑文件,也许网络丢失了连接,服务器崩溃等等。
逻辑几乎与上传上传的逻辑相同。唯一的区别是它在块上并重新启动上传以防止文件上传,并且服务器不知道。
上传逻辑的文件暂停是暂停当前上传的文件,需要暂停请求。除了掌握文件上传的进度外,停止请求的能力是使用XMLHTTPRequest的第二个原因。
使用文件调用此函数时,请从neekmap获取请求,然后使用请求调用该功能停止上传。
这只会停止将块发送到服务器,然后您可以通过调用该功能继续上传该功能。
文件间隙逻辑在上传时或上传完成后清除或上传。它只会停止请求并清除。执行清除操作后,它将无法继续恢复上传。
上传进度是在功能中,可以定义进度框的内部HTML。它将显示当前正在上传多少个文件,并提供上传进度恢复表,并说明有多少文件失败,成功,暂停等等。
还有一个最大按钮,当单击将扩展或折叠上载时,请立即上传。之后,有一个常规文件上传Progress Bar和一个容器,该文件将放置每个文件,指示元素以及单独的状态和控件。
一旦收到文件斑点,就可以用于创建文件元素。该方法是调用一个控制按钮,其中包含用于处理文件的文件名,进度条,百分比和控制按钮。
还需要跟踪每个文件元素,以便稍后使用文件blob来引用它们。它需要跟踪其大小,状态,百分比和上传的块大小。所有这些详细信息将用于介绍元素进度详细信息并更新相应的观点。
一旦使用了这些元素,就可以获得对其控制按钮的引用,并从uploader调用中的发布方法的单击事件以控制文件的内容。
删除元素时,需要通过调用该函数来更新进度框元素。该功能可以更新上传文件的所有总体详细信息。例如,所有失败,成功,悬架和上传文档。
还必须根据文件上传事件更新每个文件元素。它只是更新条目的百分比和状态文本消息,并且根据文件切换查看或隐形按钮。
现在有一个基于上传事件更新元素的函数,您需要相应地处理所有文件上传事件。
因此,每当过程事件调用回调函数时,文件对象都是从文件中的文件设置中获得的,并且事件详细信息的状态,百分比和块大小将用于使用事件详细信息,并且该函数将被调用。
上传时,对文件对象进行几乎相同的操作,然后再次调用该函数。
对于事件的暂停,状态更新为“暂停”,并且文件元素已更新。
最后,如果存在问题,将百分比设置为100,以便将完全呈现进度栏,并将状态设置为失败,以便进度栏将变成红色。
此时,客户端文件上传模块的所有逻辑均已完成。
这是一个简单的完整堆栈项目,需要服务方面来处理上传请求。您需要在项目目录中创建文件。代码如下:
这是一款非常简单的服务器,仅用于处理上传,并且不提供应用程序网站文件。
端点设置为提前设置端点,几乎没有需要做的事情。CORS模块将首先安装,以便可以平稳传递来自不同域的请求。下一个是允许请求通过添加中间件来处理JSON请求主体。
因为服务器涉及文件处理,因此需要导入模块,并且需要添加创建唯一ID生成器的功能。文件还将放置在上传目录中,因此需要一个实用程序功能来组合文件路径。以及ID和文件名。
上传请求端点上传请求端点非常简单。它需要文件名,如果不提供文件,则应丢弃错误。当有一个文件名时,生成一个空文件,然后使用文件进行响应。
上载上传的上传也非常简单。第一个设置是使其更易于使用的承诺方法。查询文件并获得其状态,以读取到目前为止上传的块的总大小并返回,否则,以400个状态和错误响应。
要上传端点以处理文件块,您需要安装模块
在此处理程序的上半年,您只需要验证文件和内容范围的请求标题即可确保您需要继续的所有内容。
Busboy模块获得了请求标头,并且可以通过管道传递请求。在Busboy File事件中,请确保字节从内存中的块开始,然后开始写入块并将文件放在一起。
在这一点上,服务器的逻辑也基本完成了。文章中涉及的源代码是在GitHub上查看源代码的。