转:https://blog.csdn.net/qq_36228442/article/details/81709272

一.简介

本文介绍了nodeJs+express框架下,用multer中间件实现文件的上传下载以及删除。

二.上传

前端使用ElementUI的upload组件实现上传,代码如下:

<el-upload
class="upload-demo"
action="http://localhost:9010/table/uploadFile"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList" ref="elupload">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
action定义后台接口的地址,后台代码如下:

var multer = require('multer');//引入multer
var upload = multer({dest: 'uploads/'});//设置上传文件存储地址
router.post('/uploadFile', upload.single('file'), (req, res, next) => {

let ret = {};
ret['code'] = 20000;
var file = req.file;
if (file) {
var fileNameArr = file.originalname.split('.');
var suffix = fileNameArr[fileNameArr.length - 1];
//文件重命名
fs.renameSync('./uploads/' + file.filename, `./uploads/${file.filename}.${suffix}`);
file['newfilename'] = `${file.filename}.${suffix}`;
}
ret['file'] = file;
res.send(ret);
})
定义好上传路径,选择好文件走后台方法时,文件已经下载到后端项目uploads文件夹。文件名是自动生成的uuid。代码需要做的是把文件的后缀加到上传的文件里。

这里是上传一个文件,所以用upload.single('file'),传入的参数是前台input type=file的name值。

multer详细API 在这里。

三.下载

后端代码:

router.use('/downloadFile', (req, res, next) => {
var filename = req.query.filename;
var oldname = req.query.oldname;
var file = './uploads/' + filename;
res.writeHead(200, {
'Content-Type': 'application/octet-stream',//告诉浏览器这是一个二进制文件
'Content-Disposition': 'attachment; filename=' + encodeURI(oldname),//告诉浏览器这是一个需要下载的文件
});//设置响应头
var readStream = fs.createReadStream(file);//得到文件输入流
debugger
readStream.on('data', (chunk) => {
res.write(chunk, 'binary');//文档内容以二进制的格式写到response的输出流
});
readStream.on('end', () => {
res.end();
})
})
   前台传入文件名,后台拼出来文件下载的相对路径。根据路径得到文件输入流,并把内容以二进制格式写到response的输出流。读取结束后响应回浏览器。

前端代码

const downloadUrl = url => {
let iframe = document.createElement('iframe');
iframe.style.display = 'none'
iframe.src = url
iframe.onload = function () {
document.body.removeChild(iframe)
}
document.body.appendChild(iframe)
};
module.exports=downloadUrl;
  创建一个工具方法,传入后台接口路径,执行下载。

dowloadUtil(`${process.env.BASE_API}/table/downloadFile?filename=${filename}&oldname=${oldname}`);
四.删除

fs.unlinkSync('./uploads/' + filename);
调用fs模块的unlinkSync方法,传入文件路径,直接删除。也可以用fs.unlink(callback)这个异步删除。

nodeJs实现文件上传,下载,删除的更多相关文章

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

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

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

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

  3. java操作FTP,实现文件上传下载删除操作

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

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

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

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

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

  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. 【RAC】 RAC For W2K8R2 安装--安装过程中碰到的问题(九)

    [RAC] RAC For W2K8R2 安装--安装过程中碰到的问题(九) 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也 ...

  2. Python爬虫系列:四、Cookie的使用

    Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密) 比如说有些网站需要登录后才能访问某个页面,在登录之前,你想抓取某个页面内容是不允许的.那么 ...

  3. MySQL Percona Toolkit--pt-osc与online DDL选择

    pt-osc和online ddl选择 1.如果表存在触发器,不能使用pt-osc.2.如果新增唯一索引,不建议使用pt-osc,以免数据丢失.3.修改索引.外键.列名时,优先选择使用ALGORITH ...

  4. PHP提示 Notice: Undefined variable

    PHP提示Notice: Undefined variable,意思是:你的程序中有未定义的变量 为什么在其他地方好好的程序,换个环境报这个Notice,因为php.ini提醒级别设置的问题 场景复原 ...

  5. RedHat7.4 yum配置

    RedHat7.4 yum配置 linux 1. yum配置 1.1 本地yum源配置 1.2 配置网络yum源为CentOS源 1. yum配置 1.1 本地yum源配置 设置使用ISO镜像软件:虚 ...

  6. appium+python自动化64-使用Uiautomator2执行driver.keyevent()方法报错解决

    前言 未加'automationName': 'Uiautomator2'参数使用Uiautomator可以正常使用driver.keyevent()方法,使用Uiautomator2时driver. ...

  7. python iter()函数迭代器

    迭代器为类序列对象提供了一个类序列的接口.python的迭代无缝地支持序列对象,而且它还允许程序员迭代非序列类型,包括用户定义的对象.迭代器用起来很灵巧,你可以迭代不是序列但表现处序列行为的对象,例如 ...

  8. 项目Beta冲刺(1/7)(追光的人)(2019.5.23)

    所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 描述Beta冲刺每日的scrum和PM报告两部分 队员学号 队员博客 221600219 小墨 https:/ ...

  9. 电脑重装后 python 2 3快速安装

    背景: 电脑重装后,python也要跟着重装,将安装包.环境变量备份等安装完成后直接安装 重装前 1. pip包备份,命令窗口 pip freeze > py2.txt #python2的包 p ...

  10. postgres —— 分组集与部分聚集

    创建表 create table t_oil ( region text, country text, year text, production int, comsumption int ) 导入数 ...