Node.js实现文件上传

最新推荐文章于 2024-07-11 15:17:16 发布

逆袭的菜鸟X

最新推荐文章于 2024-07-11 15:17:16 发布

阅读量289

点赞数

分类专栏：我的node.js

本文链接：https://blog.csdn.net/weixin_36445197/article/details/104989688

版权

我的node.js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、搭建Express流程

https://blog.csdn.net/weixin_36445197/article/details/104155270

2、安装multer

cnpm install multer --save

3、设置项目端口号打印出访问ip

这一步是非必须的，默认是本机ip+3000（ http://localhost:3000/）访问.


var ipaddress = getIPAdress();
var port = 8093;
app.listen(port, function () {
  if (ipaddress) {
      console.log('please open ' + ipaddress + ':' + port + ' in browser');
  } else {
      console.log('no networking, please open ' + ipaddress + ':' + port + ' in browser')
  }
});
/**
* 获取本机IP
* @return {[string]} [IP地址]
*/
function getIPAdress() {
  var interfaces = require('os').networkInterfaces();
  for (var devName in interfaces) {
      var iface = interfaces[devName];
      for (var i = 0; i < iface.length; i++) {
          var alias = iface[i];
          if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
              return alias.address;
          }
      }
  }
}

4、添加前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div class="single">
        <div class="title">单个文件上传</div>
        <input type="file" name="singleFile" id="singleFile">
        <button class="submit">上传</button>
    </div>

    <div class="multer">
        <div class="title">多个文件上传</div>
        <input type="file" name="multerFile" id="multerFile" multiple>
        <button class="submit">上传</button>
    </div>


    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>

        $('.single .submit').on('click',function(){

            var fileList = $('#singleFile')[0].files;
            console.log(fileList);
            var formData = new FormData();

            formData.append('singleFile', fileList[0]);

            $.ajax({
                url: '/upload/single',
                type:'post',
                processData:false,
                contentType:false,
                data: formData,
                success: function(data){
                    console.log(data)
                }
            })
        });


        $('.multer .submit').on('click',function(){

            var fileList = $('#multerFile')[0].files;
            console.log(fileList);
            var formData = new FormData();

            for(let i = 0; i < fileList.length; i++){
                formData.append('multerFile', fileList[i]);
            }

            $.ajax({
                url: '/upload/multer',
                type:'post',
                processData:false,
                contentType:false,
                data: formData,
                success: function(data){
                    console.log(data)
                }
            })
        });


    </script>
</body>
</html>

5、服务端代码

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


/* GET home page. */
router.get('/', function(req, res, next) {
  res.sendFile(path.resolve(__dirname, '../views/demo.html'));
});


var upload = multer({
  storage: multer.diskStorage({
      destination: function (req, file, cb) {
          cb(null, path.join(__dirname, './uploads/'));
      },
      filename: function (req, file, cb) {
          var changedName = (new Date().getTime())+'-'+file.originalname;
          cb(null, changedName);
      }
  })
});

//单个文件上传
router.post('/upload/single',upload.single('singleFile'), (req,res)=>{
  console.log(req.file);
  res.json({
      code: '0000',
      type:'single',
      originalname: req.file.originalname
  })
});

//多个文件上传
router.post('/upload/multer',upload.array('multerFile'), (req,res)=>{
  console.log(req.files);
  let fileList = [];
  req.files.map((elem)=>{
      fileList.push({
          originalname: elem.originalname
      })
  });
  res.json({
      code: '0000',
      type:'multer',
      fileList:fileList
  });
});

module.exports = router;

注意：destination代码中的路径使用path拼接否则可能会出现错误Error: ENOENT: no such file or directory,

var upload = multer({
  storage: multer.diskStorage({
      destination: function (req, file, cb) {
          cb(null, path.join(__dirname, './uploads/'));
      },
      filename: function (req, file, cb) {
          var changedName = (new Date().getTime())+'-'+file.originalname;
          cb(null, changedName);
      }
  })
});

文章参考

逆袭的菜鸟X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Node.js实现文件上传

1、搭建Express流程https://blog.csdn.net/weixin_36445197/article/details/1041552702、安装multercnpm install multer --save3、设置项目端口号打印出访问ip这一步是非必须的，默认是本机ip+3000（ http://localhost:3000/）访问.var ipaddress ...
复制链接

扫一扫

专栏目录