自定义文件上传按钮思路:
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}`
})
}