1.需求是能够读取到移动端/pc端浏览器选择文件的内容，如果选择的是一张图片最好能够将图片预览出来
在没有html5之前这样的需求实现都是通过先传图片到服务端再显示服务端图片地址的方法，常用的场景有头像上传修改等，这种处理方案会严重消耗不必要的服务端资源。
html input type=file 是html5提供的图片上传控件，我们可以很容易的拿到选中的file对象方便的进行前端操作

2.选中图片后将图片显示到浏览器上
  添加一个上传控件，监听change事件

    <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="imgAdd"/>
    <img id="img" src="">

  监听到change事件后通过FileReader读取文件的base64内容并打印出来

 function imgAdd(e){
    //拿到文件对象
    let file=e.target.files[0];
    //创建读取文件的对象
    var reader = new FileReader();
 
    //创建文件读取相关的变量
    var imgFile;
 
    //为文件读取成功设置事件
    reader.onload=function(e) {
        imgFile = e.target.result;
        console.log(imgFile);//一串base64编码可直接用于图片显示【附图1】
        $("#img").attr('src', imgFile);//设置图片的src为该图片base64内容
    };
 
    //正式读取文件
    reader.readAsDataURL(file);
}

3.通过formData将选中的图片上传到服务端

var formData = new FormData();
   formData.push('file',file);
   var mRequest = new XMLHttpRequest();
   mRequest.open("POST", serverUrl, true);

   mRequest.onload = function (data) {//请求成功之后的回调
       var result = data.currentTarget;
       if (result.status == 200) {
	    
	}
  }

  mRequest.send(formData);