HTML中的文件上传，实现点击头像上传图片

需求：点击下面这个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为例：

<input
   type="file"
   accept="image/jpg, image/png"
   @change="unloadAvatorChange"
   hidden
   ref="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 = "";
},