首先需要了解一下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格式

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

事件：