FormData

FormData是浏览器提供的一个WebAPI，以键值对的方式存储数据。

FormData + Ajax 技术实现文件上传的功能。

注意：Ajax 实现文件上传的时候，请求体的编码格式必须是 multipart/form-data。

FormData上传文件的格式为二进制

FormData + axios 向服务器提交普通的数据

FormData 是一个构造函数，new FormData() 即可得到 FormData 对象：

let fd = new FormData() //得到一个空的二进制FormDATa实例

调用FormData 对象的 append(键, 值) 方法，向空白的FormDATa中追加键值对数据，

键表示数据项的名字，必须是字符串

值表示数据项的值，可以是任意类型的数据

  fd.append('username', 'jack')
      fd.append('age', 18)

然后发送请求：

axios.post('http://www.liulongbin.top:3009/api/formdata', fd).then((result) => {
        console.log(result);
      })

FormData 实现头像上传

1、使用文件选择器选择图片文件

2、把用户选择的文件存入 FormData 对象

3、使用 axios 把 FormData 发送给服务器

4、服务器返回的图片地址显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-头像上传</title>
  <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
  <style>
    .thumb-box {
      text-align: center;
      margin-top: 50px;
    }
    .thumb {
      width: 250px;
      height: 250px;
      object-fit: cover;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="thumb-box">
    <!-- 头像 -->
    <img src="./images/cover.jpg" class="img-thumbnail thumb" alt="">
    <div class="mt-2">
      <!-- 文件选择框 -->
      <!-- accept 属性表示可选择的文件类型 -->
      <!-- image/* 表示只允许选择图片类型的文件 -->
      <input type="file" id="iptFile" accept="image/*">
      <!-- 选择头像图片的按钮 -->
      <button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
    </div>
  </div>

  <script src="./lib/jquery-v3.6.0.js"></script>
  <script src="./lib/axios.js"></script>
  <script>
    $('#btnChoose').on('click', function () {
      $('#iptFile').onclick()
    })

    $('#iptFile').on('change', function (e) {
      // 获取图片对象
      let files = e.target.files
      if (files.length === 0) return

      // 将图片放到FormData里面
      let fd = new FormData()
      fd.append('avatar', files[0])

      // 发送请求
      axios.post('http://www.liulongbin.top:3009/api/upload/avatar', fd).then(({ data: res }) => {
        console.log(res);
        if (res.code === 200) {
          $('.thumb-box .thumb').prop('src', 'http://www.liulongbin.top:3009' + res.url)
        }
      })
    })
  </script>
</body>

</html>

更多推荐

Ajax文件上传