#用FileReader的方式上传头像
作为一个可以登录的网站，上传头像的功能是必要的,今天自己使用了FileReader（异步读取文件）的方式进行实现，来记录一下实现的过程与一下问题。

首先是HTML部分的代码
    `
  
     <div class="profilePicture">
      <input type="file"class="file" id="fileImg"></input>
      <label for="fileImg"  @click="upImg()">上传</label>
      </div> `

这里使用label-for的方式在头像上传的旁边绑定一个说明字样'上传'，来引导用户点击上传来执行代码.input:[type:'file']可以选择文件进行上传。

然后是vue中的JS代码,每一步的功能用注释进行了说明

    `        upImg(e){
                      let input = document.getElementById('fileImg')
                //当选择了图片文件或文件发生改变时出发'fileImg'的onchange事件函数。
                      input.οnchange=(e)=>{
                //获取选取的图片，详细见说明1
                            let fileObj = e.target.files[0];
                //让web应用异步读取计算机本地的文件
                          let reader = new FileReader()
                //当文件加载完毕执行一下代码
                                reader.onload = ()=>{
                //返回并保存读取到的图片文件内容，
                //注意result属性只能用于文件加载完之后，所以要放在onload事件里
                                    var imgurl = reader.result
                                    console.log(reader.result)
                //更改图片的链接，将选择并加载好的图片呈现在界面上
                                    document.getElementById('img').src = imgurl;
                //保存图片到data中，用于之后向后台提交并保存至数据库
                                    this.img_url=imgurl;
                                }
                //再次读取文件并将它变成一个包含data的url字符串，便于向后端发送
                                reader.readAsDataURL(fileObj)
                            }`

说明1：获取到的参数e是只这个表单的一切参数和属性。target属性用于获取触发该事件的节点，e.target返回的是input这个对象。e.target.file是获取到的一串文件，e.target.file[0]是被选中的第一个文件，如果这个图片文件有参数，也可以用点语法进行获取。

注意，由于这个函数中还嵌套了函数，所以保存数据到data的这一步如果用常规的function写法写这两个函数，this会因找不到指向目标而指向顶部，导致在发送数据时取不到图片的url链接，这时我们将函数的写法改为箭头函数，固定this的指向就能解决这个问题。