思路:在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,来看看代码:
主要做的就是清空所点击的选择器的文件了