Node+Express+Ajax实现单文件和多文件上传

最新推荐文章于 2023-01-24 11:17:35 发布

爱吃囍囍丸子

最新推荐文章于 2023-01-24 11:17:35 发布

阅读量161

点赞数

分类专栏： vue 文章标签： vue ajax javascript

本文链接：https://blog.csdn.net/l529936997/article/details/118971310

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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: '上传成功'
  })
})

爱吃囍囍丸子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录