转: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)这个异步删除。

转载于:https://www.cnblogs.com/mmzuo-798/p/11101833.html

nodeJs实现文件上传,下载,删除相关推荐

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

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

  2. springboot---fastDFS 简单文件上传/下载/删除

    本来想简单的记录一下上传/下载,后来看着看着,发现这块的知识点太多.就记录下简单的操作,后面在补充 这里采用fastdfs分布式文件系统的形式来进行操作的(关于fastdfs的知识点有很多,这里就不赘 ...

  3. 基于Django的文件上传下载删除管理器

    这是一个基于Django的文件下载,上传,删除的任务管理器 先看看效果展示 1.运行完Django后,直接输入网址http://127.0.0.1:8000 就可以直接进去该网站 2.这是一个主图 上 ...

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

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

  5. springboot文件上传下载实战 ——文件上传、下载、在线打开、删除

    springboot文件上传下载实战 文件上传 文件上传核心 UserFileController 文件上传测试 文件下载与在线打开 文件下载.在线打开核心 UserFileController 文件 ...

  6. java 瑞吉外卖day4及补全功能 文件上传下载 菜品分页查询 Dto类 菜品状态修改 菜品停售以及菜品删除

    文件上传下载 文件下载介绍 文件上传代码实现 服务端上传: @RestController @RequestMapping("/common") @Slf4j public cla ...

  7. 阿里云oss 使用, 基于Nginx 配置云服务器+oss的内网访问 , 及使用Java SDK 完成上传,下载,删除,查询文件列表操作

    一.同阿里产品,云服务器和存储对象oss-配置内网访问 阿里存储对象oss 地址: https://oss.console.aliyun.com/overview 配置须知 通过Nginx 进行网络转 ...

  8. [C# 网络编程系列]专题十一:实现一个基于FTP协议的程序——文件上传下载器...

    引言: 在这个专题将为大家揭开下FTP这个协议的面纱,其实学习知识和生活中的例子都是很相通的,就拿这个专题来说,要了解FTP协议然后根据FTP协议实现一个文件下载器,就和和追MM是差不多的过程的,相信 ...

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

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

  10. java上传文件到ftp_java实现文件上传下载至ftp服务器

    以前做的一个项目,用到了文件上传下载至ftp服务器,现在对其进行一下复习,比较简单,一下就能看明白. 环境:首先,先安装ftp服务器,我是在win8本地用IIS配置的, 百度一下就可以找到安装文档. ...

最新文章

  1. 贝叶斯网络之父:当前的机器学习其实处于因果关系之梯的最低层级
  2. Java实现数据库表结构导出到Excel
  3. [导入]C#正则表达式整理备忘
  4. unity判断鼠标移动方向_【反向元气骑士】用unity实现俯视角射击是一种怎样的体验...
  5. Python字典的常用操作
  6. python读取数据文件、并把里面的数据变成x的二维坐标_(数据科学学习手札60)用Python实现WGS84、火星坐标系、百度坐标系、web墨卡托四种坐标相互转换...
  7. IntelliJ Idea学习笔记001--- IntelliJ Idea常用快捷键列表
  8. JPA唯一索引更新删除的问题
  9. 前端基础:通过HTML技术布局《李白诗词赏析》
  10. Ubuntu安装教程
  11. 小程序云开发(二) 上传图片到云服务器、上传图片并展示
  12. 数据集介绍 - Matting and Segmentation
  13. Simulink Resolver 旋转变压器解码仿真
  14. 启动Nginx时报错:error while loading shared libraries: librdkafka.so.1: cannot open shared object file: No
  15. java web 蓝牙打印_android 蓝牙打印机示例
  16. Linux系统故障-MBR(主引导记录)被破坏的解决方法
  17. 淘宝中所说的sku是什么
  18. 超级计算机排行榜历年,历代游戏主机浮点运算能力排行榜 究竟谁才是真正的性能怪兽...
  19. spring-cloud服务监控
  20. 2013各大公司的待遇如下

热门文章

  1. Ubuntu 12.10 安装JDK、Hadoop全过程
  2. 百度输入法发布AI版本10.0,重磅推出“AI助聊”功能
  3. 菜鸟教程:C++ 的关键字(保留字)完整介绍
  4. 计算机视觉:值得一读的五本计算机视觉教科书
  5. 无人再谈CV:计算机视觉公司的困境
  6. 双模sa_2020年5G终端发展展望:NSA/SA双模终端将成市场“主力军”!
  7. 015_JavaScript的四种迭代语句
  8. mysql存储过程 带参数例子_MySQL带参数的存储过程小例子
  9. 找回mysql root密码_找回MySQL的root密码
  10. java免安装版配置,Tomcat(免安装版)的安装与配置 配置成windows服务