思路:在input指定change事件触发pushImg方法,接受两个参数,一个是event,一个index

  在v-for循环渲染li的时候,使用的是v-for="(item,index) in mmm" ,其中item就是mmm数组的元素,index就是元素的下标

  了解一下pushImg方法:

   

  

  在pushImg内部let了4个变量

    mm指向data中的mmm,因为需要在reader.onload中用到,如果直接this.mmm会由于闭包取到reader.onloadg的this

    flag用于标记上传成功,因为要做一个上传成功的提示

    flie指向input

    reader就是我们预览图片需要用到的了,这是一个H5的新接口,具体的使用手册点击 这里

  在reader.onload中,我们将读取到的result也就是图片的base64码放入mmm[i].data

  还设置了个定时器改变flag的值,实现成功提示的效果

  ps:reader.onload是一个异步操作,所以result要么在它内部传出去,要么用回调或者promise传出去。

 

 

  

  现在来做最后一步——删除图片

  span中已经指定了click事件为delImg,来看看代码:

 

  主要做的就是清空所点击的选择器的文件了

   

 

posted on 2018-03-13 10:19  不愿意透露姓名的何先生  阅读(163)  评论(0编辑  收藏  举报