最近项目一直在使用vue，以前只是用某视频剪辑软件做过一些简单的演示对数据进行增删改，并没有用于实际开发项目。今天就想了解一下如何用某视频剪辑软件实现常见的图片上传前本地预览效果。

效果预览：

模板div class=' image-view ' div class=' addbox '输入类型=' file ' @ change=' getmgbase()' ' div class=' addbtn '/div/div class=' view ' div class=' item ' v-for='(item，index)在imgBase64 ' span class=' cancel-BTN ' @ click=' delImg(index)' x/span img 3360 src=' http : item '/div/div/模板脚本导出默认值{ name:存储img base64的值将值传给后端处理} }，methods: { //获取图片base64实现预览getmgbase(){ var _ this=this；var event=事件| | window.eventvar file=事件。目标。文件[0]；var reader=new FileReader()；//转base64阅读器。onload=function(e){ _ this。imgbase64。推动(即目标。结果)；} reader.readAsDataURL(文件);}, //删除图片delImg(索引){ this。imgbase64。拼接(索引，1)；} } }/scriptstyle作用域* { margin:0自动划水：0;字体系列： '微软雅黑；}。显示：块；clear:both}。图像视图{宽度：400像素高度：300 px余量：50px汽车；} .图像视图addbox { float:left位置：相对；高度：100 px宽度宽度：100像素边距-底部：20 px文本对齐：居中；} .图像视图地址框.输入{ position : absolute eleft :0高度：100 px宽度宽度：100 pxo电容：0}。图像视图。地址盒addbtn { float:left高度：100 px宽度宽度：100像素线高：100 pxcolor : # ffffont-size :40 px；背景# cccborder-radius :10 px；} .图像视图。项目{ position : relative float : left高度：100 px宽度宽度：100 pxmargin 336010 px 10px 0 { 0 }。图像视图。项目取消-BTN {绝对位置：右right:0top:0显示：块；宽度：20 px高度：20 pxcolor: # fff线高：20 px文本对齐：居中；背景：红色；边界半径：10像素；光标：指针指针；} .图像视图。项目img { width :100%；高度：100%;} .图像视图。查看{ clear:both}/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。