POST请求

新星_
923 阅读4分钟

POST请求

POST一般作为发送数据到后台时使用，POST请求传参数是放在Request body（响应体）中并且会处理参数转换为乱码的形式，不会拼接在url中显示，比GET要安全，且参数长度无限制，POST支持多种编码方式。如果有大量数据发送给后端用POST请求，最常见是通过form表单发送数据请求。发送数据的速度相对于GET请求要慢一些。POST可以发送字符串，也可以发送文件，文件最多只能发送9个。

GET请求中响应体并没有存放数据，而且GET产生一个数据包只发送一次；POST产生两个或三个数据包，会发送多次请求。

Axios做POST请求

发送参数

Axios发送POST请求方式

//发送字符串
    axios.post('url', {
    //发送的参数
     }).then(response => {
        console.log(response.data)
    })

//发送文件和字符串
let fdata=new FormData();
fdata.append("pwd",222);
fdata.append("image",f.files[0]);
    axios.post(url,fdata)
        .then(response => {
            console.log(response.data)
        })

在egg框架中获取前端POST发送给服务器的参数用ctx.request.body 而不是 ctx.body来接收POST请求的数据。

前端做POST请求时，后端egg框架会做安全验证，可以设置关闭。

// config/config.default.js文件
//关闭csrf
   config.security={
     csrf:{
       enable:false
     }
   }

post数据默认大小是100kb，可以在 config/config.default.js 中调整就是覆盖框架的默认值。

// config/config.default.js文件
config.bodyParser: {
    jsonLimit: '1mb',//json数据大小
    formLimit: '1mb',//文件数据大小
};

使用方式

    <input type="text" name="acount" class="act">
    <br>
    <input type="password" name="pwd" class="pwd">
    <br>
    <button onclick="fn()">提交</button>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js" type="application/javascript"></script>
    <script>
        function fn(){
            let act=document.querySelector(".act");
            let pwd=document.querySelector(".pwd");
            axios.post("http://192.168.0.109:7001/post",{账号:act.value,密码:pwd.value})
            .then((response)=>{
            console.log(response);
        });
        };
    </script>

async post() {
//后端接收POST发送的字符串
    let data =this.ctx.request.body;
    console.log(data,777777);
    this.ctx.body = {info:"数据提交成功",data:data};
  }

router.post("/post",controller.home.post);

image.png

后端收到的POST请求的参数

image.png

image.png

传输文件

this.ctx.request.body：后端获取post传输字段
this.ctx.request.files：后端获取post传输文件，后端接收的文件就是文件的信息保存在数组中

前端要传输文件需要把要发送给后端的数据文件，处理成表单数据。发送的文件数量不能超过9个。

上传的文件信息的类数组

image.png

获取上传的文件egg必须启用 file 模式

// config/config.default.js文件
config.multipart = {
  mode: 'file',
};

使用方式

<body>
    <style>
        .imgbox {
            width: 200px;
            height: 120px;
            background-image: url(./image/img-7029.jpg);
            background-size: 100%;
        }

        #file {
            width: 200px;
            height: 120px;
            opacity: 0;
        }
    </style>
    账号：<input type="text" name="acount" class="act">
    <br>
    密码：<input type="password" name="pwd" class="pwd">
    <p>选择头像</p>
    <div class="imgbox">
        <input type="file" id="file" multiple="true">
    </div>
    <button onclick="fg()">注册</button>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js"
        type="application/javascript"></script>
    <script>

        //把要发送给后端的数据文件，处理成表单数据
        let f = new FormData();
        f.append("user", "xx");
        f.append("pwd", "090729");
        let file = document.getElementById("file");
        console.log(file.files);
        let finp = document.querySelector("#file");
        let imgbox = document.querySelector(".imgbox");
        finp.onchange = function () {
            //预加载图片，会把图片转换为网址，显示在页面上
            //返回值是网址
            let url1 = window.URL.createObjectURL(file.files[0]);
            console.log(url1)
            imgbox.style.backgroundImage = `url(${url1})`
            f.append("touxiang", file.files[0]);

            console.log(file.files);
        };
        function fg() {
            axios.post("/post2", f).then(res => console.log(res));
        };
    </script>

async post2() {
    //前端POST发送的参数字符串
    let data = this.ctx.request.body;
    console.log(data, 777777);
    //前端POST发送的参数文件
    let f = this.ctx.request.files
    console.log(f, 8888);
    //判断用户是否有上传文件，有上传f(0)就能取到值布尔判断为true上传了就拷贝到服务器托管的用于保存用户上传的文件夹
    if (f[0]) {
      let oldpath = f[0].filepath;
      let filename = path.basename(oldpath);
      //newpath: egg/app/public/upload/u.jpg(根据filename不同文件有不同的filename)
      let newpath = __dirname + "/../public/upload/" + filename;
      fs.copyFile(oldpath,newpath,err=>{
        if(!err){
          fs.unlink(oldpath,()=>{});
        };
      });
    };
    this.ctx.body = { info: "注册成功", data: data };
  }

router.post("/post2",controller.home.post2);

image.png

image.png

后端接收的文件就是文件的信息保存在数组中，filepath是前端发送的文件资源的路径，也就是代表了图片编码。

image.png

image.png

File实例属性

File 对象的实例内容不可见，但是有以下属性可以访问:

name：只读属性，返回文件的名称。由于安全原因，返回的值并不包含文件路径 。 type：只读属性，返回 File 对象所表示文件的媒体类型（MIME），例如 PNG 图像是 "image/png"。

lastModified：只读属性，number类型，返回所引用文件最后修改日期,自 1970年1月1日0:00 以来的毫秒数。

lastModifiedDate：只读属性，Date时间对象， 返回当前文件的最后修改日期，如果无法获取到文件的最后修改日期，则使用当前日期来替代。

size：只读属性，File对象中所包含数据的大小（返回的数字代表字节），8位（bit）=1字节（byte），1024字节=1KB，1kb=1M。

文件类数组的length属性：用户选择的文件数量，可通过下标获取用户选择的文件。

image.png

实现图片预加载

window.URL.createObjectURL()，在图片本地上传实现预览中使用，返回的是一个网址，通过这个网址也可以在浏览器地址中访问到本地的这张图片，只需要将这个网址设置给img标签的src属性即可显示到网页上。

avatar
文章
阅读
粉丝