input标签file 上传头像，在线预览功能

首先需要了解一下FileReader对象：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

事件：

FileReader.onabort

处理　abort　事件。该事件在读取操作被中断时触发。

FileReader.onerror

处理 error 事件。该事件在读取操作发生错误时触发。

FileReader.onload

处理 load 事件。该事件在读取操作完成时触发。

FileReader.onloadstart

处理　loadstart 事件。该事件在读取操作开始时触发。

FileReader.onloadend

处理 loadend 事件。该事件在读取操作结束时（要么成功，要么失败）触发。

FileReader.onprogress

处理　progress 事件。该事件在读取　Blob 时触发。

方法：

FileReader.abort()

中止读取操作。在返回时，readyState属性为DONE。

FileReader.readAsArrayBuffer()

开始读取指定的　Blob 中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象. 

FileReader.readAsBinaryString()

开始读取指定的　Blob 中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL()

开始读取指定的　Blob 中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

FileReader.readAsText()

开始读取指定的　Blob 中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

 

然后直接看代码咯：（我用的ｖｕｅ

<div class="pic-wrapper"><img :src="pic" alt="用户图像"></div>
      <input type="file" name="select-pic" id="select-pic" accept="image/*" @change="previewPic" >

accept属性可以控制上传的文件类型

export default{
    name:'register',
    data(){
      return {
        pic:''
      }
    },
    methods:{
      previewPic:function(e){
        var that = this;
        var file = e.target.files[0];
        var fr =new FileReader();
        fr.readAsDataURL(file);
        fr.onload = function(e){
          that.pic = e.target.result;
        }

      }
    }
  }

读取操作完成返回的e.target.result为base64格式