node+express+ajax实现单文件和多文件上传

1、安装依赖命令：cnpm i multer --save2、单文件上传2.1、使用表单方式提交前台页面代码：<h3>单文件上传-使用form</h3><form action="/upload/form" method="POST" enctype="multipart/form-data" ><input type="file" name="myfil

柯晓楠

774人浏览 · 2020-10-21 14:31:59

柯晓楠 · 2020-10-21 14:31:59 发布

1、安装依赖

在Node服务端执行命令：

cnpm i multer --save

2、单文件上传

2.1、使用表单方式提交

前台页面代码：

<h3>单文件上传-使用form</h3>
<form action="/upload/form" method="POST" enctype="multipart/form-data" >
    <input type="file" name="myfile">
    <button type="submit">上传</button>
</form>

服务器端代码：

var multer = require('multer');
var fs = require('fs');
var path = require('path');

 //使用表单上传
var upload = multer({
  storage: multer.diskStorage({
    //设置文件存储位置
     destination: function(req, file, cb) {
       let date = new Date();
       let year = date.getFullYear();
       let month = (date.getMonth() + 1).toString().padStart(2, '0');
       let day = date.getDate();
       let dir = "./public/uploads/" + year + month + day;
 
       //判断目录是否存在，没有则创建
       if (!fs.existsSync(dir)) {
         fs.mkdirSync(dir, {
           recursive: true
         });
       }
 
       //dir就是上传文件存放的目录
       cb(null, dir);
     },
     //设置文件名称
     filename: function(req, file, cb) {
       let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
       //fileName就是上传文件的文件名
       cb(null, fileName);
     }
  })
})

 router.post('/upload/form',upload.single("myfile") ,function(req,res,next){
    res.json({
      file: req.file
    })
 })

2.2、使用ajax上传

前台页面代码：

<h3>单文件上传-使用ajax</h3>
<input type="file" onchange="upload(this)">

<script src="/js/jquery.js"></script>
<script>
    function upload(el){
        var files = el.files[0]
        var formDate = new FormData()
        formDate.set("myfile",files)

        $.ajax({
            url: '/upload/ajax',
            data: formDate,
            type: 'post',
            contentType: false,
            processData: false,
            success: function(res){
                console.log(res);
            }
        })
    }
</script>

服务器端代码：

// multer代码参考上面
// ......

router.post('/upload/ajax',upload.single("myfile") ,function(req,res,next){
  res.json({
    file: req.file
  })
})

3、多文件上传

3.1、使用form表单方式

前台代码：

<body>
    <h3>多文件上传-使用form</h3>
    <form action="/upload/form" method="POST" enctype="multipart/form-data" >
        <div>
            <input type="file" name="myfile">
        </div>
        <div>
            <input type="file" name="myfile">
        </div>
        <div>
            <input type="file" name="myfile">
        </div>
        <div>
            <input type="file" name="myfile">
        </div>
        <button type="submit">上传</button>
    </form>
</body>

服务端代码：

// multer代码参考上面
// ......

 router.post('/upload/form',upload.array("myfile",5) ,function(req,res,next){
    res.json({
      msg: '上传成功'
    })
 })

3.2、使用ajax方式

前台页面代码：

<h3>多文件上传-使用ajax</h3>
<div>
    <input type="file" onchange="change(this)">
</div>
<div>
    <input type="file" onchange="change(this)">
</div>
<div>
    <input type="file" onchange="change(this)">
</div>
<div>
    <input type="file" onchange="change(this)">
</div>
<button onclick="upload()">上传</button>

<script src="/js/jquery.js"></script>
<script>

    var formDate = new FormData()

    //选择文件事件
    function change(el){
        var files = el.files[0]
        formDate.append("myfile",files)
    }

    //上传
    function upload(){
        $.ajax({
            url: '/upload/ajax',
            data: formDate,
            type: 'post',
            contentType: false,
            processData: false,
            success: function(res){
                console.log(res);
            }
        })
    }
</script>

服务器端代码：

// multer代码参考上面
// ......

 router.post('/upload/ajax',upload.array("myfile",5) ,function(req,res,next){
  res.json({
    msg: '上传成功'
  })
})

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。