input:file的监听事件

1.html部分

<div class="thumb-box">
    <!-- 头像 -->
    <img src="./images/cover.jpg" id="userImg" 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>

2.js部分  这里使用到axios

<script src="./lib/axios.js"></script>
  <script>
    // 点击选择上传图片实际上执行的是 input:file
    let btn = document.getElementById('btnChoose');
    let iptFile = document.getElementById('iptFile');
    btn.addEventListener('click', function () {
      // 使用事件自调用
      iptFile.click();
    })
    // 写一个监听事件判断是否选中文件
    iptFile.addEventListener('change', function (e) {
      // 通过控制台打印
      console.log(e.target.files);
      // 可以看到事件对象中的files属性获取的是filesList是一个伪数组

      // 判断用户是否选择了文件，因为不仅仅是选择图片会触发change事件，用户点击取消也会触发
      if (e.target.files.length === 0) return
      // 获取图片文件
      let file = e.target.files[0]//因为input:file只能选中一个文件，选中的这个文件就是我们所需要的文件，所以直接通过下标获取到图片文件
      // 将图片保存到FormData中,方便将图片上传到服务器上
      let fd = new FormData();
      d.append('avatar', file);
      // 使用 ajax 发送 fd 对象
      axios.post('http://www.liulongbin.top:3009/api/upload/avatar', fd).then(({ data }) => {
        //这里的data是使用了对象的解构赋值
        // 上传成功后，更换显示头像
        if (data.code === 200) {
          const img = document.querySelector('.img-thumbnail')
          img.src = 'http://www.liulongbin.top:3009' + data.url
        }
      });
    });

  </script>