nodeJs实现文件上传,下载,删除
转: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实现文件上传,下载,删除的更多相关文章
- SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
- Struts2 文件上传,下载,删除
本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...
- java操作FTP,实现文件上传下载删除操作
上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端 ...
- [java]文件上传下载删除与图片预览
图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...
- nodejs+express-实现文件上传下载管理的网站
Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...
- Java 客户端操作 FastDFS 实现文件上传下载替换删除
FastDFS 的作者余庆先生已经为我们开发好了 Java 对应的 SDK.这里需要解释一下:作者余庆并没有及时更新最新的 Java SDK 至 Maven 中央仓库,目前中央仓库最新版仍旧是 1.2 ...
- 艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输)(一)
艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开元,作者是英国的,开发时间5年多,框架很稳定. 项 ...
- 【FTP】FTP文件上传下载-支持断点续传
Jar包:apache的commons-net包: 支持断点续传 支持进度监控(有时出不来,搞不清原因) 相关知识点 编码格式: UTF-8等; 文件类型: 包括[BINARY_FILE_TYPE(常 ...
- FastDFS实现文件上传下载实战
正好,淘淘商城讲这一块的时候,我又想起来当时老徐让我写过一个关于实现FastDFS实现文件上传下载的使用文档,当时结合我们的ITOO的视频系统和毕业论文系统,整理了一下,有根据网上查到的知识,总结了一 ...
- JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
随机推荐
- scrapy爬虫中间件-urlLength
浏览器里面能输入的最大url是有限制的 safari 最多 一万多 ie最少 2083 urllength中间件源码 谷歌和火狐正常 八千多 """ Url Lengt ...
- mysql主从一致性校验工具-pt
一.环境 1.系统环境 系统 IP 主机名 说明 server_id centos6.7 MasterIP master 数据库:主 177 centos6.7 SlaveIP slave 数据库: ...
- Cypress自动化环境搭建
1.Cypress 下载: 官网下载,下载后直接解压即可,解压后便可单机exe文件打开 Ps:直接打开exe是会报错找不到json文件的,所以还要安装依赖环境 运行cypress项目前,必须vue-c ...
- Linux命令——mknode
参考:What is the mknod command used for? 前言 Linux下面,一切皆文件,当然也包括设备.Linux通过major.minor号来区分不同设备,如下图
- 使用flannel+canal实现k8s的NetworkPolicy
目录 1.NetworkPolicy概述 2.NetworkPolicy策略模型 3.NetworkPolicy默认策略 4.NetworkPolicy的实现 5.使用flannel+canal实现k ...
- 二级数组省市表(二维数组json)
<一省份.城市二级联动+vue搭架> a. template部分 <section class="edit__place"> <select v-mo ...
- BZOJ1123 [POI2008]BLO(割点判断 + 点双联通缩点size)
#include <iostream> #include <cstring> #include <cstdio> using namespace std; type ...
- Spring Boot-初学01 -使用Spring Initializer快速创建Spring Boot项目 -@RestController+spEL -实现简单SpringBoot的Web页面
1.IDEA:使用 Spring Initializer快速创建项目 IDE都支持使用Spring的项目创建向导快速创建一个Spring Boot项目: 选择我们需要的模块:向导会联网创建Spring ...
- 更改DHCP服务器默认日志存储位置
DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一种有效的IP 地址分配手段,已经广泛地应用于各种局域网管理.它能动态地向网络中每台计算机分配唯一 ...
- tensorflow API _ 5 (tensorflow.summary)
tensorflow的可视化是使用summary和tensorboard合作完成的. 基本用法 首先明确一点,summary也是op. 输出网络结构 with tf.Session() as sess ...