0.效果展示

1.创建项目

创建文件夹：express_file_upload

npm init

# 入口文件选择server.js
  • 安装插件
npm install express

npm install nodemon -g

npm install body-parser multer

npm install ejs

  • 参考资料

2.上传文件

  • 上传页面

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
  <meta charset="UTF-8">
    
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
  <title>文件上传</title>
    
</head>
    
  <form action="/upload" method="post" enctype="multipart/form-data">
    
    <input type="file" name="file">
    
    <input type="submit" value="提交">
    
  </form>
    
<body>
    
</body>
    
</html>

  • 路由

    // 上传页面
    
router.get('/', (req, res)=>{
    
    console.log(__dirname)
    
    res.sendFile(path.join(__dirname,'../views/upload.html'))
    
})

// 上传文件
    
router.post('/upload', upload.single('file'), function(req, res) {
    
    console.dir(req.files)

    if (!req.file || Object.keys(req.file).length === 0) {
    
        res.status(400).send('请选择要上传的文件！');
    
        return;
    
      }

    // res.send('Success.');
    
    // 重定向到列表页
    
    res.redirect('/filelist')
    
});

3.文件列表

  • 列表展示

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>文件列表</title>
    
</head>
    
<body>
    
    <h4>文件列表</h4>
    
    <ul id="filelist"></ul>

<script src="/static/jquery.js"></script>
    
<script>
    
    $(function(){
    
        init();
    
    })

    function init(){
    
        $.ajax({
    
            type: 'GET',
    
            url:'/getFileList',
    
            success: function(data){
    
                console.log(data)
    
                $.each(data, function(index,item){
    
                    $("#filelist").append("<li><a href='/download?path="+item.path+"'>"+
    
                        item.name+"</a>&nbsp;&nbsp;&nbsp;&nbsp;"+getFileSize(item.size)+
    
                        "&nbsp;&nbsp;&nbsp;&nbsp;<button οnclick='deleteFile(\""+item.path+"\")'>删除</button></li>");
    
                })

            }
    
        })
    
    }

    function getFileSize(size){
    
        if(size < 1024){
    
            return size+'KB'
    
        }else if(size >= 1024&&size<Math.pow(1024, 3)){
    
            return (size/1024.0/1024).toFixed(2)+'MB'
    
        }else{
    
            return (size/1024.0/1024/1024).toFixed(2)+'GB'
    
        }

    }

    function deleteFile(path){
    
        var param={"path": path};
    
        console.log(path)
    
        if (confirm('确定删除?')){
    
            $.ajax({
    
                type: 'POST',
    
                url:'/delete?path='+path,
    
                data: JSON.stringify(param),
    
                success: function(data){
    
                    window.location.reload();
    
                }
    
            })
    
        }

        return false;

    }

</script>
    
</body>
    
</html>

  • 路由

    // 列表页面
    
router.get('/filelist',function(req, res){
    
    res.sendFile(path.join(__dirname,'../views/filelist.html'))
    
})

// 获取文件列表
    
router.get('/getFileList',function(req, res, next){
    
    var filelist = getFileList('upload')
    
    res.send(filelist)
    
})

function getFileList(path){
    
    var filelist = [];
    
    readFile(path, filelist);

    return filelist;
    
}

function readFile(path, filelist){
    
    var files = fs.readdirSync(path);
    
    files.forEach(walk);

    function walk(file)
    
    {
    
        var state = fs.statSync(path+'/'+file)
    
        if(state.isDirectory()){
    
            readFile(path+'/'+file, filelist)
    
        }else{
    
            var obj = new Object;
    
            obj.size = state.size;
    
            obj.name = file;
    
            obj.path = path+'/'+file;
    
            filelist.push(obj);
    
        }
    
    }
    
}

4.下载文件

// 下载文件

router.get('/download',function(req,res){

    var filePath = req.query.path;

    console.log('下载文件：'+filePath)

    filePath = path.join(__dirname,'../'+filePath);

    res.attachment(filePath)

    res.sendFile(filePath)

})

5.删除文件

// 删除文件

router.post('/delete', function(req, res, next){

    var filePath = req.query.path;

    console.log('删除文件：'+filePath)

    try {

        fs.unlinkSync(filePath)

        // 重定向到列表页

        res.send('删除成功')

    } catch (error) {

        res.send('删除失败')

    }

})

源码地址

https://gitee.com/indexman/express_file_upload

路过的给老徐点个赞加个关注收藏：）

nodejs+express4实现文件上传下载删除和列表展示功能的更多相关文章

  1. nodejs+express-实现文件上传下载管理的网站

    Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...

  2. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  3. Struts2　文件上传,下载,删除

    本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...

  4. java操作FTP，实现文件上传下载删除操作

    上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端 ...

  5. [java]文件上传下载删除与图片预览

    图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...

  6. Java 客户端操作 FastDFS 实现文件上传下载替换删除

    FastDFS 的作者余庆先生已经为我们开发好了 Java 对应的 SDK.这里需要解释一下:作者余庆并没有及时更新最新的 Java SDK 至 Maven 中央仓库,目前中央仓库最新版仍旧是 1.2 ...

  7. 艺萌TCP文件上传下载及自动更新系统介绍（TCP文件传输）（一）

    艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开元,作者是英国的,开发时间5年多,框架很稳定. 项 ...

  8. 【FTP】FTP文件上传下载-支持断点续传

    Jar包:apache的commons-net包: 支持断点续传 支持进度监控(有时出不来,搞不清原因) 相关知识点 编码格式: UTF-8等; 文件类型: 包括[BINARY_FILE_TYPE(常 ...

  9. FastDFS实现文件上传下载实战

    正好,淘淘商城讲这一块的时候,我又想起来当时老徐让我写过一个关于实现FastDFS实现文件上传下载的使用文档,当时结合我们的ITOO的视频系统和毕业论文系统,整理了一下,有根据网上查到的知识,总结了一 ...

  10. JavaWeb实现文件上传下载功能实例解析

    转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...

随机推荐

  1. WebApi的输出结果重写 OnActionExecuted

    public override void OnActionExecuted(ActionExecutedContext context) { if (context.Exception != null ...

  2. 探讨Java死锁的现象和解决方法

    死锁是多线程编程中常见的问题,它会导致线程相互等待,无法继续执行.在Java中,死锁是一个需要注意和解决的重要问题.让我们通过一系列详细的例子来深入了解Java死锁的现象和解决方法. 1. 什么是死锁 ...

  3. drop_caches 的简单学习

    drop_caches 的简单学习 背景 最近一段时间一直在学习内存相关的知识 Linux系统里面的内存管理还是非常复杂的. 我这边理解 Linux从宏观层次的 段页式内存管理 到细节的buddy和s ...

  4. [转帖]Codis作者黄东旭：细说分布式Redis架构设计和那些踩过的坑

    https://dbaplus.cn/news-141-270-1.html Codis是一个分布式Redis解决方案,与官方的纯P2P模式不同,Codis采用的是Proxy-based的方案.今天我 ...

  5. [转帖]jmeter SSL证书相关配置

    在实际工作中,我们大多数接口都是用的HTTPS来保证安全,使用jmeter测试HTTPS请求是如何配置证书呢? 1.最简单的方法,在选项里选择SSL管理器,然后选择相应的证书即可 在弹出的选择框选择证 ...

  6. [转帖]5、kafka监控工具Kafka-Eagle介绍及使用

    https://zhuanlan.zhihu.com/p/628039102   # Apache Kafka系列文章 1.kafka(2.12-3.0.0)介绍.部署及验证.基准测试 2.java调 ...

  7. [转帖]Nacos 获取配置时启用权限认证

    默认情况下获取 Nacos 中的配置是不需要权限认证的, 这个估计是由其使用场景决定的(绝大多数都是仅内网可访问). 今天调查了下如何在获取配置时增加权限验证以提高其安全性. 1. 启用 Nacos ...

  8. 【主流技术】实战之 Spring Boot 中集成微信支付（小程序）

    前言 微信支付是企业级项目中经常使用到的功能,作为后端开发人员,完整地掌握该技术是十分有必要的. 以下是经过真实商业项目实践的集成步骤,包括注册流程.调用过程.代码demo(经过脱敏)等,希望我的分享 ...

  9. 学科知识图谱学习平台项目 ：技术栈Java、Neo4j、MySQL等超详细教学

    学科知识图谱学习平台项目 :技术栈Java.Neo4j.MySQL等超详细教学 0.效果展示 1.安装教程 安装Java SDK 11,下载前需要登录Oracle账号,下载链接,安装教程,测试是否能在 ...

  10. C# 静态与动态数组

    在C#中,有许多内置的方法可以处理字符和字符串.这些方法是非常有用的,可以帮助开发人员更方便.更高效地处理文本数据.无论是静态数组还是动态数组,都可以使用System.Array类中的各种方法对数组进 ...