使用nodejs+express完成簡單的文件上傳功能

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…