轉：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)這個異步刪除。