首先,简单说明构建的文件服务器的功能。
(多)文件上传;查看上传进度)下载、删除、移动自适应、前后文件合法性检查、与服务端多线程、媒体服务器的互操作。 我们先来看看文件服务器的效果。
文件服务器页面
文件上传成功
删除文件的提示
文件下载成功
我们先看看前端代码。 对于html,在这几行中,前端大部分是js脚本(因为css是这里最简单的内容,所以我们将省略)。
html代码
加载页面后,首先确定媒体服务器是否打开。 打开媒体服务器时表示指向媒体服务器的链接,否则表示媒体服务器未打开
检查媒体服务器的状态
选择文件并单击“上传”后,以下方法将起作用: 首先,我去获取要上传的文件的名称和大小。 如果是不允许的文件,则直接发出警告并返回。 如果是允许的文件,则按钮的字符正在上传中。
检查文件的正当性
生成ajax对象,并将要上传的文件上传到服务器。 此时,服务器将重新确定文件的合法性,如果不满足要求,将直接返回错误消息。
ajax上传文件
以下信息表明html5支持上载进度。 这是仅html5支持的特性,因此在低版本的浏览器中可能无法正常显示。
上传进度信息
Axios是一个基于promise的ajax库,非常易于使用,但仅支持高版本的浏览器,低版本需要在Axios中编译。 Axios将获取的文件信息由js动态地生成html标签,并显示在网页上。
axios获取文件列表
创建所有标签后,将删除方法绑定到相应的dom元素。
添加删除方法
前端工作到此结束。 看看服务端是怎么写的。
以下代码创建了多线程node服务,多线程不仅提高了服务的处理能力,还提高了服务的稳定性。
caption">创建多线程node服务
创建服务器,如果访问的是主页,那么就直接显示刚刚创建的前端文件。
收到的请求如果是上传文件,会先初始化接收文件方法,然后判断文件是否合法,不合法就直接返回错误信息给前端,不储存文件;如果合法则进行对应的储存工作,存储完删除临时文件。因为支持单文件和多文件同时上传,所以这里还做了单文件和多文件上传的判断操作。
下面的这段是ajax请求的地址,服务器返回文件列表信息。
下面这段对应文件的删除操作,在收到前端发来的删除请求之前,需要判断文件是否存在,因为可能存在两个人同时删除的情况。如果不判断直接操作,js会报错。这里还有个地方需要注意:url在传输过程中某些特殊字符会被浏览器转义,而我们不希望被浏览器转义就需要转码。如果不转码,会存在某些文件删除不了的情况,严重的会引起服务端崩溃。
最后的这一段是用来处理静态文件的,对应的功能就是文件下载,处理静态文件不是我们今天的主题,这里就一笔带过,有兴趣的同学自行研究。
至此,文件服务器搭建完毕。
友情链接:
nodejs教你偷舍友U盘里的文件
nodejs教你搭建rpc微服务框架
nodejs教你加密舍友的windows登录账户
nodejs教你控制鼠标
Nodejs教你一行代码开机更换电脑锁屏壁纸
nodejs教你自动发送邮件之邮件轰炸机的由来
nodejs教你加密舍友的windows桌面文件
nodejs教你让舍友电脑系统不停地报错弹框