需求：点击下面这个doge然后进入选择图片的界面（类似于应用中的更换图片功能），如下👇
这里可以用到HTML中提供的type属性，
<input type="file"><div class="avator"><img src="./avator.jpg" alt=""></div>
点击哪个按钮，就可以进入选择文件的界面，但是页面中也会渲染input👇
给input加上一个hidden属性就可以隐藏了，这样input虽然也渲染了，但是不会显示
<input type="file" hidden><div class="avator"><img src="./avator.jpg" alt=""></div>
问题又来了，不显示的话那要怎么点击呢，这里就需要用到dom
<input id="fileInp" type="file" hidden><div class="avator"><img id="avator" src="./avator.jpg" alt=""></div><script>const fileInp = document.getElementById('fileInp')const avator = document.getElementById("avator")avator.onclick = function(){fileInp.click()}</script>
原生的写法有点麻烦，基本思路就是点击头像后，通过dom然后再触发input的点击事件。如果是在vue中的话可以通过ref来操作，会方便一些。
另外如果想要限制上传图片类型的话可以酱👇
<input id="fileInp" type="file" hidden accept="image/png, image/jpg">
添加accept属性增加搜索条件，这样就只能选择accept中规定的文件类型了。
再来就是需要对图片选择进行监听，再实际项目可以给input添加一个@change的监听事件，当input文件按发生变化时就会触发，但是要注意一点，如果选择的文件和input中原本存在的文件相同的话，change事件就不会触发
以vue.js为例：
<inputtype="file"accept="image/jpg, image/png"@change="unloadAvatorChange"hiddenref="uploadAvatorRef"/>
可以在unloadAvatorChange(){}中的最后加上👇，将input中的value清空，这样每次input中的数据变化时，都会触发change事件，
this.$refs.uploadAvatorRef.value = "";
重头戏！！如果想要浏览上传的图片或者想要发送请求将图片传给后端，就必须将选择好的图片进行转化，将其转化成blob对象（blob 存储着大量的二进制数据，并且 blob 的 size 和 type 属性，都会被 file 对象所继承），然后把blob中的数据放到img的src里面就可以看到图片了
unloadAvatorChange() {const blob = window.URL.createObjectURL(this.$refs.uploadAvatorRef.files[0]);this.previewImage = blob;this.$refs.uploadAvatorRef.value = "";},
如果觉得《HTML中的文件上传 实现点击头像上传图片》对你有帮助，请点赞、收藏，并留下你的观点哦！
