html图片上传和预览（vue）+vue函数传递当前对象参数，vue数据改变dom未变问题

vue函数传递当前对象参数：@change ="uploadFile($event)"    具体可看图片上传部分

 

单个文件上传预览：

这里使用button按钮嵌套img实现点击上传，点击button激活隐藏的input的click事件

<button id="load" @click="loadImg()" type="button">
    <img alt="" class="big_img" id="big_img" :src="bigimg" >
    <input type="file" id="load_xls" style="display:none"
           accept="image/gif,image/jpeg,image/jpg,image/png" @change ="uploadFile($event)">
</button>

vue的data：

bigimg: 'images/main.jpg',
bfile: null,

vue上传函数：（vue只是入门很多还是用jquery）

loadImg(){
    $("#load_xls").click();
},
uploadFile(e){
    var that = this;
    /*创建文件读取对象*/
    var reader=new FileReader();
    /*文件存储在file表单元素的files属性中，它是一个数组*/
    var