02-form 表单 & 文件上传

阿良_C
115 阅读4分钟

form 表单 & 文件上传

form表单

1.初识form表单

网页中，表单主要负责数据采集功能。例如：

1651041193897.png

组成

网页中采集数据的表单由三个部分组成，分别是：表单标签、表单域、表单按钮。

  1. HTML 的

    就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域。

    注意：每个表单域必须包含 name 属性，否则用户填写的信息无法被采集到

  2. 当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。

    • type="submit" 表示提交按钮的意思
    • type 属性的默认值就是 submit，因此 type="submit" 可以省略不写

属性一览表

form标签最重要的 3 个属性分别是 action、method 和 enctype。简介信息如下表所示：

属性可选值说明
action接口的 url 地址把表单采集到的数据，提交到哪个接口中
methodGET 或 POST数据的提交方式（默认值为 GET）
enctypeapplication/x-www-form-urlencoded multipart/form-data text/plain（很少用）数据的编码格式。具体指的是：把表单数据提交给服务器之前，如何对将要提交的数据进行编码 （默认值 application/x-www-form-urlencoded）

注意**：enctype** 属性只能搭配 POST 提交方式一起使用；如果是 GET 提交，则 enctype 没有意义！

提交表单数据

以 GET 方式提交表单数据

在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 GET：

1651041572656

注意：由于 method 属性的默认值就是 GET，因此上述的 method="GET" 可以被省略！

以 POST 方式提交表单数据

在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 POST，并通过 enctype 属性指定数据的编码方式为 application/x-www-form-urlencoded：

1651041630428

注意：由于 enctype 的默认值就是 application/x-www-form-urlencoded，因此上述的 enctype 可以被省略！

通过 Ajax 提交表单数据

通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。

  • 监听表单的 submit 提交事件
  • 阻止默认提交行为
  • 基于 axios 发起请求
  • 指定请求方式、请求地址
  • 指定请求体数据

1651041730226

axios 请求方法简写

为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：

axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

1651041880861

体验 axios.post() 的用法

// 不带请求体
axios.post('http://www.itcbc.com:3006/api/post').then(result => {
    console.log(result);
})
// 带请求体
axios.post('http://www.itcbc.com:3006/api/post', {
    username: 'zhangsan',
    password: '123456'
}).then(result => {
    console.log(result);
})

体验 axios.get() 的用法

// 不带查询参数
axios.get('http://www.itcbc.com:3006/api/get').then(result => {
    console.log(result);
})
// 带查询参数
axios.get('http://www.itcbc.com:3006/api/get', {
    params: { id: 1 }
}).then(result => {
    console.log(result);
})


 <script src="./lib/axios.js"></script>
    <script>
      // axios.get()   直接发送get请求
      // axios.post()  直接发送post请求
      // axios.delete()   直接发送delete请求
      // axios.put()    直接发送put请求
      // console.dir(axios);

      // get 请求
      // axios.get(Url)
      // axios.get(Url,{params:{参数}})  ;

      // axios.get("http://www.itcbc.com:3006/api/getbooks?appkey=wanshao1234")
      // .then(result=>{
      //   console.log(result);
      // })

      // post请求
      // axios.post(url,参数(对象));
      // axios.post(url,参数(字符串格式));
      // axios
      //   .post('http://www.itcbc.com:3006/api/addbook', {
      //     bookname: 'post请求1',
      //     author: 'post请求222',
      //     publisher: 'post请求33',
      //     appkey: 'wanshao1234',
      //   })
      //   .then((result) => {
      //     console.log(result);
      //   });
      const url = 'http://www.itcbc.com:3006/api/addbook';
      const query =
        'bookname=111222&author=222222&publisher=33333&appkey=wanshao1234';
      axios.post(url, query).then((result) => {
        console.log(result);
      });
    </script>

拦截器

拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。 好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

1651042076427

直接在网站上复制即可。

www.axios-http.cn/docs/interc…

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

在响应拦截器中隐藏 loading 效果：

1651235832679

FormData和文件上传

FormData介绍

  • FormData 是一个浏览器对象。用于管理表单数据。
  • IE10+支持。
  • 可以这样理解，FormData的作用和 jQuery中的 serialize() 作用一样，用于快速收集表单数据
  • 并且可以将创建的FormData对象直接提交给接口。
  • 典型应用场景：FormData + Ajax 技术实现文件上传的功能。

FormData基本使用方法

  • 假设需要收集 …… 里面的所有表单项的值
  • 要求，每个表单元素都具有 name 属性

1651235972296

注意事项：提交 FormData 对象，不能使用 GET 方式，具体以接口文档为准。

在提交数据前，可以使用下列API方法对数据进行查看和修改

1651236014620

FormData和serialize的区别

共同点

  • 都需要设置表单各项的name属性。
  • 都能快速收集表单数据
  • 都能够获取到隐藏域（）的值
  • 都不能获取禁用状态（disabled）的值

不同点

  • FormData属于原生的代码；serialiaze是jQuery封装的方法
  • FormData可以收集文件域（）的值，而serialize不能。如果有文件上传，则必须使用FormData。
  • 得到的结果的数据类型不一样（知道即可）

文件上传

实现步骤

  1. 使用文件选择器选择图片文件
  2. 把用户选择的文件存入 FormData 对象
  3. 使用 axios 把 FormData 发送给服务器
  4. 模拟文件选择器的点击事件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>10-文件上传-图片</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <img src="" alt="" />
    <input type="file" accept="image/*" />
    <script src="./lib/axios.js"></script>
    <script>
      /* 
      2 把图片上传到指定服务器 
        2 根据接口文档的要求来代码 
          url、请求类型、请求参数（重点）  

          url http://www.itcbc.com:3006/api/formdata
          method post 
          请求参数 上传文件 给后端的参数 肯定是 formdata 类型 
      
       */
      const input = document.querySelector('input');
      const img = document.querySelector('img');
      input.addEventListener('change', function () {
        const file = this.files[0];
        const src = URL.createObjectURL(file);
        img.src = src;

        // 参数名称 avatar  参数值 file

        const formdata = new FormData(); // 创建一个空formdata对象
        formdata.append('avatar', file); // 接口要求 把文件追加到 formdata对象

        // 把数据上传到服务器中 即可
        axios({
          method: 'post',
          url: 'http://www.itcbc.com:3006/api/formdata',
          data: formdata,
        }).then((result) => {
          console.log(result);
        });

        // 简写
        // axios
        //   .post('http://www.itcbc.com:3006/api/formdata', formdata)
        //   .then((result) => {
        //     console.log(result);
        //   });
      });
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝