nodeJs上傳附件

時間 2019-12-11

標籤 nodejs 上傳附件简体版

原文原文鏈接

兩種方案：這兩種方案傳參仍是有區別額javascript

在nodeJs中上傳附件調用了 multer 的中間件，採用這個中間件來上傳html

首先是表單（前端部分）：前端

<!DOCTYPE html>
<html>
  <head>
    <title>nodejs文件上傳</title>
    <script src="/javascripts/jquery.min.js"></script>
  </head>
  <body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input name="fileUpload" type="file" />
        <!--1-->
        <img src="" alt="">
        <button type="submit">上傳</button>
    </form>
    <script>
    (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))
    </script>
  </body>
</html>

　　服務器端：java

var express = require('express');
var router = express.Router();
var multer = require('multer');
var fs = require('fs');

const UPLOAD_PATH = './uploads'

var upload = multer({ dest: UPLOAD_PATH })

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

//多文件上傳
// 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 })
//   });
// })
//單個文件上傳
router.post('/upload', upload.single('fileUpload'), function (req, res, next) {
  const { file } = req;
  console.log(req.files);
  fs.readFile(file.path, function(err, data) {
    fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) {
      if (err) res.json({ err })
      res.json({
        msg: '上傳成功'
      });
    });
  })
})

module.exports = router;

這事表單上傳還有一種就是用異步上傳（我比較經常使用的一種）node

這種的話須要懟傳輸的數據進行從新封裝（首先把所得的數據封裝爲FormData 而後給後臺）jquery

 let _this = this;
    document.getElementById('upload').onchange = function (e) {
      let file = e.target.files[0];
      var formData = new FormData();
      formData.append('fileUpload', file);
      _this.axios.post('/user/file-upload', formData).then(function (response) {
        if (response.data.state === 200) {
          _this.imageUrl = _this.$store.state.imgBaseUrl + response.data.result;
          _this.registerFromData.imageUrl = response.data.result;
        }
      });
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。