Vue+UpLoad实现上传预览和删除图片的实践

1、用vue+element完成一个图片上传、点图预览、加删除功能,如图:

Vue+UpLoad实现上传预览和删除图片的实践

2.首先我们再组件中引入这一段代码,每个属性的使用也都放在这里了:

3.接下来就是它的on-preview属性,我们可以用它来实现图片预览

先要设一个图片预览的弹框:

再进行逻辑操作 

3.然后来实现点击删除图片,这时候用到了on-remove这个属性 

 4.前面的功能都实现了的话,到这时候你已经成功了一半了,若项目需要提交添加的图片,则用到了它的on-success属性。

5.文章小提示: 

1.别忘了给需要设置成动态属性的属性加上v-bind

2.在data中注册需要绑定的变量 

到此这篇关于vue+upload实现上传预览和删除图片的文章就介绍到这了,更多相关vue upload 上传预览和删除图片内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

猜你喜欢