AJAX+FormData 实现头像上传和图片预览

主要的实现步骤：
① 使用文件选择器选择图片文件
② 把用户选择的文件存入 FormData 对象
③ 使用 axios 把 FormData 发送给服务器
④ 模拟文件选择器的点击事件

ajax提交服务器
formdata存放数据
获取文件对象 files
获取文件对象地址 URL.createObjectURL();
以下是全部代码:
html

 <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/*" style="display: none;">
      <!-- 选择头像图片的按钮 -->
      <button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
    </div>
  </div>

javascript

<script src="./lib/jquery-v3.6.0.js"></script>
  <script src="./lib/axios.js"></script>
  <script>
    // 点击button按钮 触发 input的文件按钮
    $('#btnChoose').click(function () {
      //  触发 用trigger绑定事件更好点
      $('#iptFile').trigger('click');
    })
    $('#iptFile').change(function () {
      //  获取当前这个文件的 文件对象
      //  let file = this.files
      if (this.files.length > 0) {
        // 获取文件对象
        let file = this.files[0];
        // 做一个文件预览
        let objFile = URL.createObjectURL(file);
        $('img').attr('src', objFile);
        // 让文件上传
        let fd = new FormData();
        fd.append('avatar', file);
        axios.post('http://www.liulongbin.top:端口号/api/upload/avatar', fd).then(({ data }) => {
          console.log(data);
        })
      }
    })
  </script>