nodejs：express file upload demo

这个小demo，是基于nodejs express框架实现文件上传

客服端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
</head>

<body>
  用户：<input type="text" id="user"><br>
  密码：<input type="password" id="pwd"><br>
  文件：<input type="file" id="f1" multiple><br>
  <input type="button" value="提交" id="btn">
</body>
<script>
  window.onload = function () {
    let ouser = document.getElementById('user');
    let opwd = document.getElementById('pwd');
    let obtn = document.getElementById('btn');
    let of1 = document.getElementById('f1');

    obtn.onclick = function () {
      let data = new FormData();
      data.set('user', ouser.value);
      data.set('pwd', opwd.value);
      Array.from(of1.files).forEach(file =>{
        data.append('f1',file);
      })
      /* let arr = [];
      data.forEach((value, key) => {
        arr.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
      }) */

      let OAjax = new XMLHttpRequest();
      OAjax.open('POST', 'http://localhost:3000/aip', true);
      OAjax.send(data);
      OAjax.onreadystatechange = function () {
        if (OAjax.readyState == 4) {
          if (OAjax.status >= 200 && OAjax.status <= 300 || OAjax == 304) {
            alert('成功');
          } else {
            alert('失败');
          }
        }
      }
    }
  }
</script>

</html>

服务器端代码

const express = require('express'); // 主体
const body = require('body-parser');  // 接受普通POST数据
const multer = require('multer');   // 接收文件POST数据

let server = express();


// 中间件
server.use(body.urlencoded({extended: false}));

let multerObj = multer({dest: './upload/'}); // 上传到哪里去
server.use(multerObj.any()); // 任何

server.post('/aip',(req,res)=>{
  res.header('Access-Control-Allow-Origin','*');  // *号允许所有的域名，跨域；不安全
  res.send('ok');
  console.log(req.body);
  console.log(req.files);
});

server.listen(3000);

公有云私有云

发布了86 篇原创文章 · 获赞 15 · 访问量 7万+

私信关注

nodejs：express file upload demo

猜你喜欢