nodeJs實作檔案上傳，下載下傳，删除

一.簡介

     本文介紹了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)這個異步删除。