转:
一.简介
本文介绍了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)这个异步删除。