【每日一练】上传文件小案例

自定义文件上传按钮思路：

1.隐藏file表单 (设置display为none)

2.给自定义按钮注册点击事件，点击注册file表单默认点击事件

触发注册点击事件:dom元素.onclick()

触发默认点击事件:dom元素.click()

结构：

 <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" />
      <br />
      <!-- 选择头像图片的按钮 -->
      <!-- <button class="btn btn-primary" id="btnChoose">
        选择 & 上传图片
      </button> -->
      <label for="iptFile">
        <img src="./images/1.png" width="50px" height="50px" alt="">
      </label>
    </div>
  </div>

代码如下：

//1.给file表单注册onchange事件：选择文件触发
    document.querySelector('#iptFile').onchange = function () {
//2.获取用户选择的文件 this.files[0]
//3.创建FormData对象,把文件添加到fd对象
      let fd = new FormData()
//4.调用append方法追加文件
      fd.append('avatar', this.files[0])
//5.ajax发送请求
      axios({
        url: 'http://www.liulongbin.top:3009/api/upload/avatar',
        method: 'post',
        //将FormData对象作为参数，fd对象会自动帮我们设置请求头，自动处理文件参数
        data: fd,
      }).then(res => {
        //成功回调
        console.log(res)
//6.显示上传成功的图片
        document.querySelector('img').src = `http://www.liulongbin.top:3009${res.data.url}`
      })
}