H5上传图片评论上传预览展示（删除）

前端事件我碰见了最常见的评论上传（实现预览，上传，删除）功能，就整理了一下代码。弄了一个相对比较见简单的功能。本人小白一个大神勿喷！（如有不对的地方挺指出）》》》》》》》》》》废话少说现在开始--------》

<input type="file" accept="image/*" capture="camera" id="dianjidaioxiangji"  @change='changeimage($event)'>  //accept="image/*" capture="camera" 这两处是移动端唤起直接照相操作 （可忽略）

新增操作（把获取的img路径存储起来）再向服务器上传换取线上路径

           changeimage(event) { //新增操作
				var objurl = this.getObjectURL(event.target.files[0]); //获取上传文件路径
				if (this.shuzhuimg.length < 6) { //最大上传数量
					/* 在这里访问服务端上传图片请求操作 换取线上路径 
					   this.shuzhuimgxianshang.push(objurl);  //然后用一个新数组在保存线上返回的线上路径（向后台传的内容）
					*/
					this.shuzhuimg.push(objurl); //向末尾添加路径 （只是为了给用户展示）
				} else {
					//获取上传图片失败逻辑
				}
			},

删除操作

           dainiclocl(delid) { //删除操作
				this.shuzhuimg.splice(delid, 1);   //delid(获取的删除照片下标)  //删除给用户展示数组
				//this.shuzhuimgxianshang.splice(delid, 1);  //delid(获取的删除照片下标)  //删除向后台传的数组
			},

页面展示

      <div class="shangimgtp" v-for="(v,i) in shuzhuimg"> //遍历存储img路径的数组
					<img class="imtjaatupian" :src="v" id="sahngchanimg" /> //展示图片
					<img src="../../assets/imgs/ziyuan003.png" class="iocone" @click="dainiclocl(i)" /> //展示图片 (右上角的小圆球) 删除用的 获取触发时的下标
	 </div>

效果图 H5上传图片评论上传预览展示（删除）
只是想把自己这个方法分享出来（不喜勿喷）求大神指点一二希望可以能帮到你谢谢啦!!!