使用nodejs+express完成簡單的檔案上傳功能

Whirring發表於2019-02-26
NodeJSExpress

1.建立express專案

express -e nodejs-uploadfile
複製程式碼

2.下載multer中介軟體

npm i multer or yarn multer
複製程式碼

3.在routes/index.js中引用multer，由於還要使用到檔案操作，還要引用fs模組,並指定檔案上傳目錄

const multer  = require(`multer`);
const fs = require(`fs`);

const UPLOAD_PATH = `./uploads`
複製程式碼

單檔案上傳: index.html中檔案如下(form檔案的型別必須為 enctype="multipart/form-data"),

<form action="/upload" method="post" enctype="multipart/form-data">
    <input name="fileUpload" type="file" />
    <img src="" alt="">
    <button type="submit">上傳</button>
</form>
複製程式碼

在routes/index.js裡面新增upload路由用來處理上傳檔案的操作

router.post(`/upload`, upload.single(`fileUpload`), function (req, res, next) {
  const { file } = req;
  fs.readFile(file.path, function(err, data) {
    fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) {
      if (err) res.json({ err })
      res.json({
        msg: `上傳成功`
      });
    });
  })
})
複製程式碼

如果上傳的檔案是圖片的話，還可以使用FileReader物件實現圖片預覽

(function($){
  $(`input`).on(`change`, function(event) {
    var files = event.target.files,
        reader = new FileReader();
    if(files && files[0]){
        reader.onload = function (ev) {
            $(`img`).attr(`src`, ev.target.result);
        }
        reader.readAsDataURL(files[0]);
    }
  })
}(jQuery))
複製程式碼

多檔案上傳: 多檔案上傳的原理和單檔案上傳的原理一樣，程式碼如下：

router.post(`/upload`, upload.array(`fileUpload`), function (req, res, next) {
  const files  = req.files;
  const response = [];
  const result = new Promise((resolve, reject) => {
    files.map((v) => {
      fs.readFile(v.path, function(err, data) {
        fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) {
          const result = {
            file: v,
          }
          if (err)  reject(err);
          resolve(`成功`);
        })
      })
    })
  })
  result.then(r => {
    res.json({
      msg: `上傳成功`,
    })
  }).catch(err => {
    res.json({ err })
  });
})
複製程式碼

相關程式碼在github.com/bWhirring/n…

相關文章