Node+Express实现文件的上传下载与删除

1. 演示效果

实现一个服务端的静态资源管理器，可以对服务端的文件进行上传、下载、删除等操作，并且对中文的文件名做了处理。效果如下：

2. 创建项目

本项目是使用 express 模板生成器创建的，需要先安装 express-generator 模板生成器，在终端运行：

$ cnpm i -g express-generator

然后在需要创建项目的文件夹路径处，打开终端依次执行下列命令：

# 创建项目
$ express -e myapp# 进入项目的目录
$ cd myapp# 初始化依赖
$ cnpm i# 安装 multer 模块，用于在服务端接收上传的文件对象
$ cnpm i multer --save

项目创建好以后，需要在项目的根目录下创建 static 的文件夹！

3. 设计上传与下载的服务端路由

在 routes/index.js 中编写以下代码：

var router = require('express').Router();
var multer = require('multer');
var fs = require('fs');
var path = require('path');//查询文件的路由
router.get('/', function(req, res, next) {//读取 static 目录下的文件fs.readdir('./static', function(err, files){if(err){res.render('index', {list: [],msg: '暂无文件'})return}res.render('index', { list: files,msg: `共有 ${files.length} 个文件`});})
});//删除文件的路由
router.get('/del', function(req,res){//接收文件名的参数let {file} = req.query//删除 static 目录下的该文件fs.unlink(`./static/${file}`, function(err){res.redirect('/')})
})//文件上传的路由
router.post('/upload', multer({ dest: './static/' }).any(), function(req,res){let file = req.files[0]//拼装文件名称let filename = 'static/'+ file.originalname//为上传成功的文件重命名（上传的文件默认不是文件的原名称）fs.rename(file.path, filename, function(err){res.redirect('/')})
})//文件下载的路由
router.get('/down', function(req,res){//接收文件名称let {fn} = req.query//如果参数中有中文，需要解码fn = decodeURI(fn)//判断该文件是否存在fs.access(`./static/${fn}`, function(err){if(!err){res.set({//告诉浏览器这是一个二进制文件"Content-Type": "application/octet-stream",//告诉浏览器这是一个需要下载的文件，使用encodeURI方法，是为了避免中文名称下载时出问题"Content-Disposition": `attachment;filename=${encodeURI(fn)}`})//使用流读取文件，并响应给客户端fs.createReadStream(`./static/${fn}`).pipe(res)}})})module.exports = router;

4. 设计前端的EJS模板

打开 views/index.ejs 文件，示例代码如下：

<!DOCTYPE html>
<html><head><title></title></head><body><h1>静态资源管理器</h1><!-- 用于上传文件的form表单 --><form action="/upload" method="POST" enctype="multipart/form-data" ><input type="file" name="myfile"><button type="submit">上传文件</button></form><hr><!-- 文件列表 --><div style="color: blue;"><%= msg %></div><ul><% list.forEach(function(item){ %><li style="margin: 10px 0px;"><%=item%> &nbsp;<a href="javascript:del('<%=item%>');">删除</a> &nbsp;<a href="javascript:down('<%=item%>');">下载</a></li><% }) %></ul><script>//删除文件的请求方法function del(filename){var result = window.confirm(`确定要删除${filename}吗？`)if(result){window.location.href = `/del?file=${filename}`}}//下载文件的请求方法function down(filename){var url = `/down?fn=${filename}`window.location.href = encodeURI(url) //处理中文参数}</script></body>
</html>

Node+Express实现文件的上传下载与删除相关推荐

前端vue+express实现文件的上传下载
新建server.js yarn init -y yarn add express nodemon -D var express = require("express"); con ...
[转]文件传输协议(FTP)操作(上传,下载,新建,删除,FTP间传送文件等)实现汇总1
转自:http://blog.csdn.net/soarheaven/archive/2008/12/08/3474152.aspx 最近项目需要对FTP服务器进行操作,现把实现总结如下: 打算分2篇 ...
Java使用SFTP和FTP两种连接服务器的方式实现对文件的上传下载
一.Java实现对SFTP服务器的文件的上传下载: 1.添加maven依赖: <dependency><groupId>com.jcraft</groupId>&l ...
文件的上传下载功能的实现（包括进度条）[telerik控件]
文件的上传下载功能的实现(包括进度条) 1.准备工作首先我们需要Telerik控件,数据库,上传文件文件夹. Telerik控件: RadUpload.RadProgressManager.RadP ...
Microsoft .NET Framework 2.0对文件传输协议(FTP)操作(上传,下载,新建,删除,FTP间传送文件等)实现汇总1...
相关文章导航 Sql Server2005 Transact-SQL 新兵器学习总结之-总结 Flex,Fms3相关文章索引 FlexAir开源版-全球免费多人视频聊天室,免费网络远程多人视频会议系统 ...
ssm框架验证码图片加载不出_基于SSM框架的文件图片上传/下载功能实现
前一段时间很多做毕业设计的同学问:如何写图片和文件的上传下载功能,今天正好有时间,所以就做了一个案例,详细的讲解这个功能. 框架结构: 对于很多做过开发的而言,上传功能肯定都用过,而且用到的场景很多, ...
ACTIVEX实现大文件FTP上传下载---上
ACTIVEX实现大文件FTP上传在Windows 操作系统下,有一个重要的机制,就是OLE ,就是可以让某个应用程序(OLE Controller)访问其它应用程序(OLE Server)所提供的 ...
基于layui.upload.js 拖拽文件/文件夹上传下载
layui.upload.js 拖拽文件/文件夹上传下载前言 js代码页面使用(我这里用的是uploader.jsp) CSS文件上传效果总结前言项目需求完成文件上传,可以拖拽上传文件/文 ...
使用JSP+Servlet实现文件的上传下载上传
<!DOCTYPE html > <html> <head> <meta charset="UTF-8"> <title> ...
文件的上传下载（一）
2019独角兽企业重金招聘Python工程师标准>>> 最近公司培训,所以收集整理了一些关于上传下载的资料,进行了整理与大家分享. Struts对文件上传的支持非常好,它是通过jak ...