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

ゞ浴缸里的玫瑰 2022-12-17 02:21 185阅读 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>

服务器端代码：

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