基于NodeJS+Express实现文件上传下载

需求描述

  1. 允许用户上传文件,服务端从请求中读取并且解析
  2. 允许用户下载文件,如报表导出功能,基于当前展示的表格数据,导出excel文件

涉及到的技术点

  1. 文件读写
  2. 文件上传
  3. 文件下载

文件上传与读取文件

前端代码

比较常见的场景是:在前端页面中会有一个表单,表单中会输入一些字段,同时上传文件。
代码示例:

<form method="POST" action="/apps/rel" encType="multipart/form-data" name="form">
    <input id="inputFile" type="file"
           accept="application/vnd.ms-excel|xls"
           name="inputFile" onChange={this.handleFileChange}/>
    <button onClick={this.handleSubmit}>点击提交</button>
</form>

表单提交一般通过js代码提交:首先做数据合法性校验,然后执行form.submit()执行提交。如果不想页面跳转,则将表单target设置为一个隐藏的iframe。

服务端代码

服务端处理上传文件使用multer npm包。
代码示例:

//先引入multer
var multer = require('multer');
var upload = multer();
//从upload中获取文件

router.post('/rel', upload.fields([{name: 'inputFile', maxCount: 1}]),function(req,res,next){
     var inputFiles = req.files; //未传时为undefined
     ...
     //读取文件内容
     var content = inputFiles['inputFile'][0].buffer.toString();

})

multer的更多使用请参考官方文档。

文件下载

文件下载比较典型的例子是报表导出:通过数据库数据查询,写入到csv文件中,然后支持浏览器下载。
代码示例:

router.get('/export',(req,res,next)=>{
    //查询数据库
    ...
    let realPath = path.join(TMP_PATH, fileName);
    let writeStream = fs.createWriteStream(realPath);
    let bom = new Buffer('\xEF\xBB\xBF', 'binary');
    writeStream.write(bom);
    //写入数据内容
    ...

    writeStream.end();
    writeStream.on('finish', ()=> {
        res.download(realPath, outName, (err)=> {
            fs.unlink(realPath, (err2)=> {
                if (err2) {
                    logger.error('删除文件失败,err=' + err);
                }

            });
            if (err) {
                logger.error(err);
                res.status(404).end();
            }

        });
    });
})

常见问题

  1. 写入csv中文乱码问题
    由于 NodeJS只支持 ascii、utf8、base64、binary 编码方式, 不支持 MS 的 utf-8 + BOM 格式, 所以 excel 打开中文乱码。
    解决方法:既然excel需要BOM,写入数据前先加入一个BOM。utf-8对应的BOM是EF BB BF
 let writeStream = fs.createWriteStream(realPath);
 let bom = new Buffer('\xEF\xBB\xBF', 'binary');
 writeStream.write(bom);
 writeStream.write('hello');
 writeStream.write('继续测试');
 writeStream.end('中文');
...
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,280评论 19 139
  • 本文包括:1、文件上传概述2、利用 Commons-fileupload 组件实现文件上传3、核心API——Dis...
    廖少少阅读 12,669评论 5 91
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,697评论 25 709
  • 瑞恩放下手机,低声叫骂了一句:“该死,我怎么会有这么差的记性?”声音虽然不大,但是仍然让旁边的吉姆听到了。 “怎么...
    看笑话儿不嫌事大阅读 524评论 0 0
  • 1 夏末的风吹到你的琴声 一个人在哭泣 在前往凄凄的秋夜里 2 我耿耿于怀,我这个夏季遇到的风雨 不是纯粹的天气 ...
    徐夭夭阅读 426评论 6 6